关于弹性布局的一些知识点

首先，弹性布局分为两部分。

1.给父元素添加的语法：

（1） display : flex;，让他的子元素变成弹性布局。

（2）flex-direction: row; 布局的排列方向 （主轴排列方向），取值有：

    row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
    row-reverse 显示为行。但方向和row属性值是反的。
    column 显示为列。
    column-reverse 显示为列。但方向和column属性值是反的。

（3）flex-wrap : nowrap; 是否进行换行处理。取值有：

    nowrap; 默认值，不换行处理
    wrap; 换行处理
    wrap-reverse; 反向换行

（4） justify-content ; 属性决定了主轴方向上子项的对齐和分布方式，取值有：

    flex-start ： 子项都去起始位置对齐。
    flex-end ： 子项都去结束位置对齐。
    center ： 子项都去中心位置对齐。
    space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
    space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
    space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

（5）align-items : 每一行中的子元素上下对齐方式，取值有：

    flex-start;
    center;
    flex-end;
（6）align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
    默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
    值跟justify-content取值是相同的。

2.给子元素添加的语法：

（1）order : 排序。

（2）flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )，取值有：

    0 : 默认值 , 不去扩展
    1 : 去扩展 , 会把空白区域全部沾满
    子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。

（3）flex-shrink : 收缩有：

    正常默认值是1
    0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）

（4）flex-basis : 跟flex-shrink/flex-grow很像。

     flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。

（5） algin-self: 跟align-items操作很像，区别就是只是针对某一个子项。

下面写一些常用的：

display : flex;
flex-direction;
justify-content;
align-items;
flex;