display:flex属性

我眼中的弹性盒子

display: flex意思是弹性布局，弹性布局简直不要太好用，今天就来和大家具体讲讲它的属性和用法吧。

flex的属性（以下五个属性语法都是加在父元素身上的。）

一 1. flex-direction: row; 布局的排列方向 （主轴排列方向）
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的，在水平方向上为从右往左。
column 显示为列 方向为在垂直方向上从上到下
column-reverse 显示为列。但方向和column属性值是反的
2. flex-wrap : nowrap; 是否进行换行处理。此语法是加在父元素身上的。
nowrap; 默认值，不换行处理
wrap; 换行处理
wrap-reverse; 反向换行
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的，顺序一定不能乱)。
3. justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只
有中间空白宽度一半。
space-evenly : evenly是匀称、平等