弹性布局的理解

一、怎么理解弹性布局

               首先弹性布局  也就是flex 布局： 分为主轴和侧轴，分别是 对应 X 轴 和 Y轴

采用 Flex 布局的元素，称为 flex容器（container），它的所有的子集都会成为容器的成员 ，成为flex的项目（item），

容器中默认存在两轴主轴和侧轴、呈现90度的关系。无论是主轴还是侧轴，都有起点和终点，这对元素的排列对齐非常重要。

默认情况下：主轴方法从左到右，侧轴从上到下

二、属性

按照属性来分，可以划分为，父类（容器）属性和子类（容器成员）属性

1.父类（容器）属性：

     flex-direction：设置主轴的方向

flex-direction可设置的值	意义
row	（默认值）让子元素从左到右排列
row-reverse	让子元素从右到左
column	让子元素从上到下
column-reverse	让子元素从下到上

        flex-wrap: 设置是否换行

flex-wrap可设置的值	意义
nowrap	不换行
wrap	换行

flex-flow: 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row wrap;

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

justify-content可设置的值	意义
flex-start	（默认值）从头部开始排列（如主轴是x轴，则从左往右）
flex-end	从尾部开始排列（如果主轴是x轴，则从右往左）
center	让子元素在主轴中居中显示
space-around	让子元素等均分配剩余空间（类似设置了相等的左右magin效果）
space-between	让子元素先两边贴边，再平分剩余空间

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

align-items可设置的值	意义
stretch	（默认值）拉伸
flex-start	从侧轴头部开始排列
flex-end	从侧轴尾部开始
center	居中显示

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

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

align-content可设置的值	意义
stretch	（默认值）拉伸（设置子项元素高度平分父元素高度）
flex-start	从侧轴头部开始排列
flex-end	从侧轴尾部开始
center	在侧轴中间显示
space-around	让子元素在侧轴平分剩余空间
space-between	让子元素在侧轴先分布在两头，再平分剩余空间

2.子类（容器成员）属性

        一般只是用这几个，

        flex：flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

        align-self控制子项自己在侧轴的排列方式

        order属性定义子项的排列顺序（前后顺序）