概念
- 弹性盒子,是css3新增的一种布局方式,可以用更有效的方法使弹性容器的内的子元素按 照特定的方式进行排列和对齐以及空间的分配。
定义一个弹性盒子
- 弹性盒子的组成:
弹性容器、弹性子元素
弹性容器内包含了一个或多个弹性子元素。 - display:flex | inline-flex(使容器宽由内容撑开)
- flex弹性布局
flex布局,可以简便、完整、响应式的实现各种页面。而且它得到了所有浏览器的支持
注意:
1. 弹性容器外及其子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性盒内布局
2. 采用flex布局的元素称为flex容器,其子元素自动成为容器成员,称为flex项目
3. 容器中默认存在两根轴,主轴和交叉轴
4. 默认是主轴排列
属性
写在容器上(容器属性)
- flex-direction:定义内部的排列方向(确定主轴)
值:
(1)row:默认,水平方向,从左到右
(2)row-reverse:水平方向,从右到左
(3)column:显示为列,垂直方向(从上到下)
(4)column-reverse:显示为列,垂直方向(从下到上) - justify-content:定义子元素在主轴上的对齐方式。
值:
(1)flex-start:起始位置对齐(默认)
(2)flex-end:结束位置对齐(主轴最后对齐)
(3)center:表现为居中对齐
(4)space-between:表现为两端对齐(中间剩余空间等分给每一个元素)
(4)space-around:每个子项目两侧间隔相等。
(5)space-evenly:均匀,平等对齐,每个子项两侧空白间距相等 - align-items:定义子元素在交叉轴(侧轴)方向上的对齐方式。
值:
(1)stretch:默认,在子元素不设置高度的情况下,默认子元素高度和容器相等
(2)flex-start:容器顶部对齐
(3)flex-end:容器底部对齐
(4)center:垂直居中对齐
(5)baseline:基线对齐 - flex-wrap:定义子元素整体单行显示还是换行显示。
值:
(1)nowrap:不换行(默认),一行放不下自动缩小子元素
(2)wrap:宽度不足换行显示。第二行在第一行下面
(3)wrap-reverse:宽度不足换行显示,第二行在第一行上面
写在子项上(项目属性)
- order属性:定义项目的排序,order值越大排列越靠后,默认值为0
- flex-grow属性:定义项目的放大比例,默认为0,即若存在剩余空间,也不放大
可选值:number
注意:
(1)默认值0,有剩余空间不分配
(2)如果元素的值都是1,剩余的大小平均分配给每一个元素
(3)如果都是1其实有一个值是2,值是2的元素所分配的空间是其它的2倍 - flex-shrink属性:定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
可选值:number
注意:如果项目flex-shrink都为1,空间不足时,等比例缩小。如果一个为0,其余为1,空间不足时,前者不缩小,负值对改属性无效 - align-self:某一个子元素交叉轴的对齐方式,和align-item属性作用相同
值:
(1)flex-start:容器顶部对齐
(2)flex-end:容器底部对齐
(3)center:垂直居中对齐
(4)baseline:基线对齐
(5)stretch:默认 - flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
一般使用flex:1; 设置子元素平分容器的大小
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值:0 1 auto
flex-basis: 设置弹性盒子的初始大小