什么是flex布局
flex布局可以简单的理解为是一种方便实现元素空间分布和元素对齐一维布局模型。
什么是一维布局
一维布局的意思就是一次只能处理一行或一列上的元素空间分布。
轴线
flex布局主要是基于轴线实现元素的空间分布，轴线分为主轴和交叉轴。主轴主要是由flex-direction来控制，交叉轴则是垂直于主轴的轴线。
主轴&交叉轴
主轴主要是通过flex-direction控制轴向，其取值包含四个
row、row-reverse、column[- /ˈkɒləm/]、column-reverse，交叉轴则是垂直于主轴的轴线。;
-
row、row-reverse
flex-direction:row;flex-direction:row-reverse;是将主轴设置为水平方向，子元素横向排列,row子元素自左向右顺序排列，row-reverse子元素自右向左顺序排列 -
column、column-reverse
flex-direct排列ion:column;flex-direction:column-reverse;是将主轴设置为垂直方向，子元素垂直排列,column子元素自上而下依次排列，column-reverse子元素自下而上依次排列
主轴在水平方向上控制子元素布局
-
justify-content
子元素对齐方式和轴线息息相关，如果主轴为水平方向(
flex-direction:row;flex-direction:row-reverse;)，控制子元素的水平空间分布的是justify-content属性，控制子元素的垂直空间分布就是align-item属性属性 值 解释 justify-content flex-start 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。 justify-content flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐 justify-content center 每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 justify-content space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 justify-content space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 justify-content space-evenly flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。 -
align-items
子元素对齐方式和轴线息息相关，如果主轴为水平方向(
flex-direction:row;flex-direction:row-reverse;)，控制子元素的垂直空间分布的是align-items 属性属性 值 解释 align-items flex-start 元素向交叉轴起点对齐。 align-items flex-end 元素向交叉轴终点点对齐。 align-items center 元素在交叉轴方向居中。 align-items baseline 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
