flex弹性盒布局是css中最基础的一种布局方法，它可以帮助前端程序员更方便更灵活的对页面进行布局排版。以下就为大家整理一些常见的flex布局的代码和作用，希望可以帮助到有需要的人。
弹性盒flex
display：flex 开启弹性盒
未开启弹性盒
开启弹性盒。
父元素属性
flex-direction 主轴方向
flex-direction：row; 水平排列（行排列，在开启弹性盒之后就会默认水平排列，就相当于默认输入了该代码）
开启水平排列，和开启弹性盒效果一致。
flex-direction:row-reverse;反向水平排列（原本的排列方式为1,2,3,4，输入这行代码就会呈反向排列4,3,2,1）
反向水平排列
flex-direction：column;垂直排列；（竖向排列）
垂直排列
flex-direction: column-reverse;反向垂直排列（同反向水平排列）。
反向垂直排列
justify-content 主轴子元素排列。
justify-content：flex-start；子元素从头到尾排列（子元素紧贴左侧开始排列和水平排列效果一样，开启弹性盒之后就会默认有此效果）。
子元素从头到尾排列（和水平排列效果一样，开启弹性盒之后就会默认有此效果）。
justify-content:flex-end;子元素从尾像头排列（子元素会紧贴右边排列，顺序不会打乱）。
子元素从尾像头排列。
justify-content:center;居中排列（子元素会在父元素顶部中心排列）。
居中排列
justify-content:space-around;平分剩余（每个子元素占据的空间都会是一样的。）
平分剩余
justify-content:space-between；两边贴边，平分剩余(位于左右最两侧的子元素贴边，然后所有的子元素占据一样的空间大小。between为之间的)。
两边贴边，平分剩余
align-items 侧轴方向子元素的排列
主轴和侧轴，侧轴也叫作副轴
align-items：flex-start；从上到下排列（子元素会在父元素的顶部排列,需要父元素有高度）
（和水平排列效果一样，开启弹性盒之后就会默认有此效果）。
align-items:flex-end;从下往上排列（子元素会在父元素的底部排列，需要父元素有高度）
从下往上排列
align-items:stretch；拉伸（子元素会被拉长。需要父元素有高，子元素不能有高）
拉伸（子元素会被拉长。需要父元素有高，子元素不能有高）
align-items：center；居中（子元素会在侧轴中间排布）
居中
flex-wrap；子元素是否换行
flex-wrap：wrap；换行。（子元素的宽超出父元素的宽就会换行）
换行。（子元素的宽超出父元素的宽就会换行）
flex-wrap：nowrap；不换行。（即使子元素的宽超出父元素也不换行）
不换行。（即使子元素的宽超出父元素也不换行）
flex-flow属性：复核属性；
flex-flow:row-reverse wrap;让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行；
align-content属性 子元素整体，在父元素中的对齐方式
align-content:flex-start; 侧轴头部排列(子元素不止一行时该属性才有效果,所以需要换行)。
侧轴头部排列（子元素不止一行时该属性才有效果）
align-content:flex-end；侧轴尾部排列（子元素不止一行时该属性才有效果）。
侧轴尾部排列（子元素不止一行时该属性才有效果）
align-content:center；居中排列（子元素不止一行时该属性才有效果）
居中排列（子元素不止一行时该属性才有效果）
align-content:space-around；侧轴平分空间（空间是垂直平分的。子元素不止一行时该属性才有效果）。
侧轴平分空间（空间是垂直平分的。子元素不止一行时该属性才有效果）
align-content:space-between；两侧贴边，平分剩余空间（子元素不止一行时该属性才有效果）。
两侧贴边，平分剩余空间（子元素不止一行时该属性才有效果）
子元素属性
flex属性 份数
flex：1；该子元素占据剩余空间
align-self属性 自己的对齐方式
align-self：stretch；拉伸
align-self：center； 居中
align-self：start； 左对齐
align-self：end； 右对齐