[A] flex弹性布局
flex弹性盒模型
2009年。W3C提出一种新的方案---flex布局,可以简便,完整,响应式的实现各种布局。
目前他已经得到了所有的浏览器的支持,这意味着,这项功能可以被安全使用
作用在flex容器上的属性 作用在flex子元素上的属性
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-bais
align-items flex
align-content aglin-self
作用在flex容器上的属性
【注】当父元素display:flex时,子元素的margin:auto会实现上下左右居中的效果
1. flex-direction: 控制子项整体布局的方向
参数:
row 默认值,显示为行,从左向右
row-reverse 显示为行,从右向左
row 显示为列,从上向下
row-reverse 显示为列,从下向上
2. flex-wrap: 控制子项单行显示还是换行显示
参数:
nowrap 默认值,表示单行显示,不换行
【注】当内容足够在一行显示时,会自动调整宽度尽量显示,实在显示不了再一溢出
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示,但是行是从下往上,即第一行在最下面
3. flex-flow: flex布局的flow流动特性,实际上是flex-direction和flex-wrap的缩写
第一个值表示方向,第二个值表示换行,中间用空格隔开
参数:
row wrap 从左向右以行显示,并且宽度不够时自动折行
4. justify-content: 决定主轴方向上子项的堆砌和分布方式(主轴方向即flex-direction确定的方向)
参数:
flex-start: 默认值,表示从起始位置对齐
flex-end: 表示从结束位置对齐
center: 表示居中对齐
space-between: 表示两端对齐,多余的空白部分在元素中间均匀分配
space-around: 每个子项周围均匀分配空白部分(如:1子项11子项1)
space-evenly: 空白部分在各个子项之间均匀分配(如:1子项1子项1)
5. align-iems: 决定子项相对于flex父容器在侧轴上的对齐方式
【注】所谓侧轴,即与主轴相垂直的轴
参数:
strech: 默认值,flex子项拉伸
flex-start: 表现为容器顶部对齐
flex-end: 表现为容器底部对齐
center: 表现为容器垂直居中对齐
6. aglin-content: 针对于多行的操作,与justify-content效果相似。
参数:
strech: 默认值,每一行flex子项等比例拉伸,如果有两行,则每行拉伸高度为50%
flex-start: 表现为容器顶部对齐
flex-end: 表现为容器底部对齐
center: 表现为容器垂直居中对齐
space-between: 表示两端对齐,多余的空白部分在元素中间均匀分配
space-around: 每一行享有独立且不重叠的空白空间
space-evenly: 每行元素都完全上下等分
作用在flex子项上的属性
1. order: 子项order值可以改变某一个flex子项的排序位置
默认每个子项的order值为0,值越小越靠前
2. flex-grow: 拓展子项宽度, 按比例占用剩余空白的空间,取值为0-1
当多个子项均有flex-grow设置时,按比例分配给这些子项空白区域
3. flex-shrink: 当容器空间不足时,进行子元素收缩,取值为0-1, 默认值为1
4. flex-basis: 定义在分配剩余空间之前,元素的默认大小。
参数:
像素值
5. flex: 为flex-grow flex-shrink flex-basis的复合写法
6. align-self: 单独控制某一个子项的处置对齐方式
参数:
flex-start 表现为容器顶部对齐
flex-end 表现为容器底部对齐
center 表现为容器垂直居中对齐