flex布局

一、flex-direction设置主轴的方向

1、默认主轴：水平向右，侧轴，垂直向下

2、属性值

主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素跟着主轴来排列的

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

二、justify-content 设置主轴上的子元素排列方式

属性	说明
flex-start	默认从主轴头部开始
flex-start	从主轴尾部开始
center	主轴居中对齐
space-around	平分剩余空间
space-bitween	先贴边再平分剩余的空间

 

三、 align-items 设置侧轴上的子元素排列方式（单行）

属性值	说明
flex-start	默认值，从上到下
flex-end	从上到下
center	居中
stretch	拉伸

1

四、 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行，即flex-wrap: wrap），在单行下是没有效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

五、flex-wrap设置子元素是否换行

属性值	说明
nowrap	默认值，不换行
warp	换行

六、flex-flow

flex-flow属性是flex-direction、flex-warp属性的复合属性

flex-flow: row wrap;

七、flex属性定义子元素分配空间