2009年,W3C提出了一个新的盒模型(flex),用于解决网页布局中的一些问题。
flex 的优势
- flex布局的子元素不会脱标。
- 属性非常丰富,可以灵活使用更加便捷的为页面布局。
- IE低版本不支持IE10-11支持度不高,标准浏览器完全支持。
- 移动端支持性也比较高。
弹性盒子
声明定义:使用display:flex;或者inline-flex**声明一个元素为弹性盒子。
[注意 ]弹性盒子中的子级块级元素会并排显示。
flex与inline-flex的区别
- flex;如果没有设置宽高,宽默认为100%, 高度为内容的高。
- inline-flex;如果没有设置宽高,宽高为内容的宽高,使用的比较少。
弹性盒子的属性
1.flex-direction 控制子元素排列的方向。
- row 从左到右水平排列子元素(默认值)。
- row-reverse 从右到左水平排列子元素。
- column 从上到下垂直排列子元素。
- column-reverse 从下往上垂直排列子元素。
例1:
<style>
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
flex-direction: row;
}
.son {
width: 100px;
height: 100px;
background: #ff6700;
border: 1px solid;
font-size: 24px;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
例2:
<style>
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
flex-direction: row-reverse;
}
.son {
width: 100px;
height: 100px;
background: #ff6700;
border: 1px solid;
font-size: 24px;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
2.flex-wrap 规定容器是单行或是多行。
- nowrap 子元素不会换行(默认)。
- wrap 子元素的宽/高总和超出父容器的宽/高时,子元素会换行。
- wrap-reverse 容器换行时,以相反方向。
例1:
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
}
.son {
width: 100px;
height: 100px;
background: #ff6700;
border: 1px solid;
font-size: 24px;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
例2:
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
flex-wrap: wrap-reverse;
}
.son {
width: 100px;
height: 100px;
background: #ff6700;
border: 1px solid;
font-size: 24px;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
3.flex-flow 是flex-direction与flex-wrap的组合简写。
例:
flex-flow: row wrap;
主轴与交叉轴
- 主轴:flex子元素的排列方向。默认是水平方向,从左到右。
- 交叉轴:与主轴垂直,方向是换行的方向。
1.justify-content 控制子元素在主轴上的排列方式。
- flex-start 第一个元素紧靠主轴的起点。
- flex-end 元素紧靠主轴的终点。
- center:元素居中。
- space-between 第一个元素紧靠起点,最后一个元素紧靠终点,余下的元素平均分配剩余空间。
- space-around 每个元素两侧都有一个相同的距离,所有元素之间的间隔要比元素与容器之间的间隔大一倍。
- space-evenly 元素间的平均分配。
例1:
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
justify-content: space-between;
}
例2:
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
justify-content: space-around;
}
2.align-items 设置子元素在交叉轴上的对齐方式。
- flex-start 元素紧靠交叉轴的起点。
- flex-end 元素紧靠交叉轴的终点。
- center 元素在交叉轴方向居中。
- stretch 拉伸。让子项与父容器的交叉轴等高或等宽(默认),前提是子项没有设置相应的
宽高。
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
align-items: stretch;
}
.son {
/* width: 100px;
height: 100px; */
background: #ff6700;
border: 1px solid;
font-size: 24px;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
3.align-content 设置子元素在交叉轴上的对齐方式。(只适用多行,需要配合flex-wrap。)
- flex-start 元素紧靠交叉轴的起点。
- flex-end 元素紧靠交叉轴的终点。
- center 元素在交叉轴方向居中。
- stretch 拉伸。让子项与父容器的交叉轴等高或等宽(默认),前提是子项没有设置相应的宽高。
- space-between:两端对齐,第一行紧靠起点,最后一行紧靠终点,剩余空间平均分配。
- space-around:每一个元素都有一个相等的距离,两个元素之间的距离不会重合。元素间的间隔要比元素与容器之间的间隔大一倍。
- space-evenly:元素间的距离平均分配。
例1:
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
align-content: center;
}
例2:
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
例3:
.father {
width: 600px;
height: 400px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
}