015 HTML+CSS(Class184 - )
2021-02-03 17:17
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 表现为容器垂直居中对齐