六、弹性盒子模型

弹性盒子模型：可以简洁，完整，响应式(自适应)的实现各种页面布局

    display: flex;
        容器（display: flex;）和项目：采用flex布局的元素，称为flex容器，他的所有子元素称为flex项目
        主轴：元素盒子排列的方向（默认的排列方向x轴，当然不是说主轴就是x，因为我们可以通过属性来改变主轴的方向）
        交叉轴：和主轴垂直的轴

注：容器属性：给容器的属性（一下的属性全部给容器）

1、flex-direction改变主轴的方向。

属性值有四种情况：

{flex-direction: row;}/*默认值，从左往右排列*/
{flex-direction: row-reverse;}/*从右往左排列*/        
{flex-direction: column;}/*从上往下排列*/
{flex-direction: column-reverse;}/*从下往上排列*/

2、flex-wrap控制容器是单行还是多行

属性值有三种情况：

{flex-wrap: nowrap; } /*默认值，不换行，会压缩，不会超出父级*/
{flex-wrap: wrap; } /*换行*/
{flex-wrap: wrap-reverse; } /*只是单纯的上下反转，不是序号改变*/

如下：

image.png

3、复合属性：flex-flow:direction wrap 复合属性包括主轴方向和换行

例：
{flex-flow: row-reverse wrap; }//换行反向X轴

如图：

image.png

4、justify-content定义在主轴上的对齐方式

属性值五种：

flex-start   //默认值，从主轴开始部分开始排列(说白了就是左对齐)
flex-end   //从主轴结束部分开始排列（说白了是右对齐）
center   //居中
space-between   // 两端对齐，中间有相等的间隔
space-around    //环绕对齐，每个项目两边的间隔相等

效果如下：

image.png

image.png

image.png

image.png

image.png

5、align-items定义弹性盒子项目在交叉轴上如何对齐

align-items: stretch; //默认值，交叉轴上沿对齐
align-items: flex-end; //交叉轴下沿对齐
align-items: center;  // 交叉轴中部对齐
align-items: baseline;   //项目里面的文字的基线对齐

附：沿基线对齐效果

image.png

6、align-content定义了多根主轴对齐方式，如果项目自有一根轴线，则不起作用（交叉轴的对齐方式）

属性值六种：

stretch   //默认值，主轴线占满整个交叉轴（每行元素下沿都有一个主轴，且每行主轴的高度相等
flex-start   //与交叉轴上沿紧密对齐
flex-end   //与交叉轴下沿紧密对齐
center   //居中
space-between   // 与交叉轴两端对齐，中间主轴宽度平均分配
space-around    //环绕对齐，，中间主轴宽度平均分配

附图：