flex布局

一、什么是flex布局？

flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 flex 布局。  

二、flex布局都用到哪些属性：

1、父项常见的属性：

1、flex-direction调整主轴方向：row（默认值） 、row-reverse、 column 、column-reverse ；    row：默认X轴为主轴方向（水平）、column：默认Y轴为主轴方向（竖直）、              row/column-reverse：在此方向基础上翻转（下面展示的是row-reverse）

    <style>
        .f {
            width: 500px;
            height: 300px;
            display: flex;  /*使用flex布局必须写*/
            background-color: coral;
            flex-direction: row-reverse; /* 主轴方向 */
        }
        .s{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: burlywood;
        }
    </style>

2、 flex-wrap控制是否换行： nowrap（默认值不换行）、wrap、wrap-reverse; wrap-reverse 按照主轴方向排列，如果是X轴为主轴，换行的那一行在之前几行的上方，若Y轴为主轴，那换行的那一行在之前几行的右方。（因为我设置了border 所以每四个换一次行，不设置边框是五个）

            flex-wrap: wrap-reverse; /*是否换行*/

3、flex-flow是flex-direction、flex-wrap的简写形式  

flex-flow: row wrap; /*同时设置 主轴方向 和 是否换行*/

4、 justify-content：设置主轴上的子元素排列方式：flex-start（默认值）、flex-end、center、space-between、space-around           

flex-start 默认值、 flex-end:从尾部开始排列，类似于翻转但元素位置不变、center居中、      space-between(先让两边贴边，再平分)、 space-around(平分剩余空间)

5、align-items：设置侧轴上的子元素排列方式（单行)：stretch(默认值)、center、flex-start、flex-end

stretch(默认值):项目被拉伸以适应容器、在不设置高情况下拉伸到与主轴高一致、center：项目位于容器的中心、flex-start：项目位于容器的开头，垂直对齐开始位置、 flex-end：项目位于容器的结尾，垂直对齐结束位置（位置在侧轴末尾）

6、align-content：设置侧轴上的子元素排列方式（多行)：stretch(默认值)、center、flex-start、flex-end、space-between、space-around

stretch：默认值，项目被拉伸以适应容器（只有当子元素没设置高时才会生效）。center：项目位于容器的中心。flex-start：项目位于容器的开头。flex-end：项目位于容器的结尾。 space-between：项目位于各行之间留有空白的容器内。(中间空白)、space-around 项目位于各行之前、之间、之后都留有空白的容器内。            注：必须设置以下属性才会起作用。对父元素设置自由盒属性display:flex ；设置排列方式为横向排列flex-direction:row；设置换行flex-wrap:wrap;

           

---

 2、子项常见的属性：

1、order控制子项目的排列顺序：用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

        .s:nth-child(1) {
            order: 10;
        }

        .s:nth-child(2) {
            order: 0;
        }

        .s:nth-child(3) {
            order: 8;
        }

        .s:nth-child(4) {
            order: 1;
        }

 

2、align-self：stretch(默认值)、center、flex-start、flex-end

单独的控制某一个子项目的侧轴方向，前提不能产生换行不允许设置aligin-content，如果设置了 则当前属性不生效 

3、flew-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

4、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

5、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小。它也可以像宽高一样设置值如200px

6、flex：

分配剩余空间(除了固定宽度以外的空间)  宽平分，高与父盒子一样（使用后宽高失效 ）、如果用百分数,要加起来是100才可以用，可实现圣杯布局。

flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值为 0 1 auto(1、auto可选)  有两个快捷值：auto（1 1 auto）和none（0 0 auto）