1. flex布局原理
为父盒子设置flex布局后，来控制子盒子的位置和排列方式，且子元素的float（浮动）、clear（清除浮动） 和 vertical-align（元素对齐方式） 属性都将失效。此时容器中的直系子元素就会变为flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
元素排列为一行 (flex-direction属性的初始值是row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis属性为auto。
flex-wrap属性为nowrap。
vertical-align属性运用（只对行内和行内块元素有效）：
baseline：基线对齐
top：顶端对齐
middle：中部对齐
bottom：底线对齐
2.父项常见属性（display：flex）
主轴：
主轴方向：flex-direction
row(默认）从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
主轴上子元素排列方式：justify-content
flex-start 从头开始排列
flex-end 从尾开始排列
center 居中对齐
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间
子元素是否换行：flex-wrap
nowrap （默认）不换行
wrap 换行
wrap-reverse：换行，第一行在下方。
侧轴：
设置侧轴上的排列方式（多行）：align-content
flex-start 从头开始排列
flex-end 从尾开始排列
center 居中对齐
stretch 平分父元素高度
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间
侧轴单行排列：align-items
flex-start 从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸（默认）
复合属性主轴方向+换行：flex-flow
eg:flex-flow:row wrap;
3.flex布局子项常见属性
平分份数：flex：1；
控制子项自己在侧轴上的排列方式：align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。（单独设置）
定义项目的排列顺序 ：order
数值越小，排列越靠前，默认为0。
网友评论