CSS阶段五：flex伸缩盒模型，自适应布局

flex/inlineflex 伸缩盒模型（快速布局利器）

该元素即成为伸缩容器（flex container）

伸缩容器的子元素自动升级为伸缩项目（flex item）

display = flex;

特点:

• 伸缩项目默认在一行排列。

• 子元素自动升级为块元素。

• 所有伸缩项目默认在主轴的 start 处排列。

• 主轴默认从左到右

• 侧轴默认从上到下

• 伸缩项目也可以再次设置为flex，即flex可以互相嵌套。

伸缩容器样式

justify-content

设置主轴排列样式

可选值：

• flex-start (默认值)
• flex-end 此时所有的伸缩项目在伸缩容器主轴的end处排列
• center 所有的伸缩项目位于伸缩容器主轴的中间处
• space-between 此时伸缩项目沿着伸缩容器的主轴均匀分布
• space-around 伸缩项目沿着伸缩容器的主轴均匀分布，但是剩余空间会包裹着每个伸缩项目

align-items

设置侧轴对齐方式

• stretch 每个伸缩项目会沿侧轴被拉伸
• flex-start 所有伸缩项目位于伸缩容器侧轴start处
• center 所有伸缩项目位于伸缩容器侧轴中部
• flex-end 所有伸缩项目位于伸缩容器侧轴end处
• baseline 主轴中伸缩项目基线最大的那个伸缩项目的基线作为所有伸缩项目的对齐基线

flex-direction

主轴方向

• row（默认方向）
• row-reverse 主轴方向从右到左，侧轴方向从上到下
• column 主轴从上到下，侧轴从右到左
• column -reverse 主轴从下到上，侧轴从右到左

flex-wrap

伸缩项目在主轴空间不足时是否被压缩

• nowrap （默认值） 每个伸缩项目都会被按比例被压缩。

    一、需要压缩的宽度
    200 + 200 + 200 – 400 = 200
    二、“总压缩基数”
    200*1 + 200* 1 + 200*1 = 600
    三、每个伸缩项目实际压缩率
    200*1/ 600 =  0.3333
    200*1/ 600 = 0.3333
    200*1/ 600 = 0.3333
    四、每个伸缩项目实际需要压缩空间
    200 * 0.3333 =  66.6
    200 * 0.3333 =  66.6
    200 * 0.3333 =  66.6
    五、每个伸缩项目实际的宽度
    200 – 66.6 = 133.4
    200 – 66.6 = 133.4
    200 – 66.6 = 133.4
  

• wrap 主轴空间不足时，伸缩项目不会被压缩，自动换行，保持原来的大小。

• wrap-reverse 让伸缩项目自动换行，保持原来的大小。但此时伸缩项目在主轴flex-start和侧轴flex-end处开始排列

align-content

主轴空间不足时，子项目在侧轴分布样式

• stretch 伸缩项目会沿侧轴被拉伸
• flex-start 伸缩项目位于伸缩容器侧轴start处
• center 伸缩项目位于伸缩容器侧轴中部
• flex-end 伸缩项目位于伸缩容器侧轴end处
• space-between 项目位于各行之间留有空白的容器内
• space-around 项目位于各行之前、之间、之后都留有空白的容器内。

flex-flow

可以设置 flex-flow 来实现 flex-direction 和 flex-wrap 简写。

flex-flow : column wrap 

单个伸缩项目样式

flex-basis

设置元素高度，使用flex-basis为元素指定宽度，效果与width相同

align-self

单个伸缩项目，伸缩容器侧轴的位置

• stretch 伸缩项目会沿侧轴被拉伸
• flex-start 伸缩项目位于伸缩容器侧轴start处
• center 伸缩项目位于伸缩容器侧轴中部
• flex-end 伸缩项目位于伸缩容器侧轴end处
• baseline 主轴中伸缩项目基线最大的那个伸缩项目的基线作为所有伸缩项目的对齐基线

order

重新设置伸缩项目在主轴方向的排列顺序，

• 0 --- 默认值，沿着主轴从start -> end
• 大于0 重新按order设置的数字排序（start -> end）数值越大越靠后

flex-grow

设置每个伸缩项目如何分配主轴空间，伸缩项目会按比例分配空间大小

• n 伸缩项目会按照数值比例来分配主轴空间

flex-shrink

设置压缩率，主轴空间不足时伸缩项目会按照压缩率被压缩，默认1

• n 会按照设置的数值按照比例进行压缩，设置为0是表示项目不会被压缩

---

自适应布局

左边自适应右边固定宽度

 /*
        需求：
        左侧自适应（随着浏览器窗口宽度的变化而变化）
        右侧固定宽度

        1.两列都需要设置浮动
        2.第一列设置 100%　宽度，同时设置右侧外边距为负，绝对值 ＝ 第二列的宽度
        3.第一列的内容需要一个正常文档流的块元素承载，设置右侧外边距 = 第二列的宽度
    */


    .col-1 {
        width: 100%;
        height: 210px;
        background-color: blue;
        font-size: 72px;
        margin-right: -200px;
        float: left;
    }

    .col-2 {
        width: 200px;
        height: 200px;
        background-color: orange;
        margin-top: 0px;

        float: left;
    }

    .col-left{
        margin-right: 200px;
    }

右边自适应左边固定

    需求：
    右侧自适应（随着浏览器窗口宽度的变化而变化）
    左侧固定宽度

    1.第一列设置固定的宽度，设置左浮动。
    2.第二列使用overflow: hidden 开启BFC，重新计算元素的宽度，（切记不要设置固定，使用浏览器默认值）
    */
.col-1 {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: left;
}
.col-2 {
   /* width:200px;*/
    height: 210px;
    background-color: orange;
    overflow: hidden;
}

两边固定中间自适应

需求：两边固定，中间自适应

    .layout {
        height: 200px;
        background-color: orange;
    }
    .col-left{
        width: 100%;
        float: left;
        height: 200px;
        background-color: pink;
        margin-right: -200px;
    }
    .col-right{
        float: left;
        width: 200px;
        height: 200px;
        background-color: #254282;
    }
    .content{
        margin-right: 200px;
    }

    .col-left-1{
        width: 200px;
        height: 200px;
        float: left;
        background-color: #ff0000;
    }

    .col-left-2{
        height: 210px;
        background-color: #bbbbbb;
        overflow: hidden;
    }

多列等宽

制作多列等宽自适应布局

    1.父元素  display:  table; width: 100%
    2.布局元素（子元素 ） display: table-cell;
    3.子元素之间的空隙，通过一个正常的div分割即可。
    4.如果存在多行，需要在包裹一个 display: table-row（）

我们推荐在局部布局中使用！不推荐整体布局！

.table-box{
        display: table;
        width: 100%;
    }
    .box {
        height: 200px;
        width: 33.3333333%;
        display: table-cell;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: blue;
    }
    .box3{
        background-color: gold;
    }

    .white-space{
        height: 200px;
        width: 5px;
        background-color: #fff;
    }