Flex布局

flex布局，简称弹性盒子。

flex  ：默认会主轴（x）与副轴（y）（也可以自行调换的）。

它可以自动适应盒子容器大小，而做出相应改变。使页面美观。

      设置头部，宽、高、背景颜色。

 <div style="width: 100%;">
        <!-- 头部 -->
      <div style="width: 100%;height: 100px;background-color: rgb(37, 190, 236);"></div>

设置中部结构，分部三个，用display:flex;

style=“flex：1；”设置盒子占区域比例。

<!-- 中间-->
       <div style="width: 100%;height: 500px;display: flex;"> 

        <!-- 中左边-->
       <div style="flex: 1;background-color: rgb(52, 240, 68);"></div>
       <!-- 中-->
       <div style="flex: 3;">
        <!-- 中 一-->
           <div style="width: 100%;height: 100px;background-color: rgb(212, 241, 80);display: flex;">
             <div style="flex: 1; background-color: darkgray;"></div>
             <div style="flex: 1; background-color: black;"></div>
            </div>
            <!-- 中 二-->
              <div style="width: 100%;height: 200px;display: flex;">  
                <div style=" height: 200px;flex: 2;">
                  <div style="width: 100%;height: 100px;background-color: rgb(221, 197, 90);"></div>
                
                  <div style="width: 100%;height: 100px;background-color: rgb(98, 231, 9);"></div>
                  
                </div>
                <div style="flex:2;width:100%;height: 200px;background-color: blue;"></div>
              </div>
              <!-- 中 三-->
              <div style="width: 100%;height: 200px; display: flex;">
                <div style="height: 100px;flex: 3;">
                  <div style="width: 100%;height: 100px;background-color: rgb(117, 113, 94);"></div>
                  <div style="width: 100%;height: 100px;background-color: rgb(118, 94, 175);"></div>
                </div>
                <div style="flex:1;width:100%;height: 200px;background-color: rgb(223, 25, 230);"></div>
              </div>
      </div>
       <!-- 中右边-->
       <div style="flex: 1;background-color: rgb(223, 19, 80);"></div>
        </div>

        <!-- 底部-->
       <div style="width: 100%;height: 100px;background-color: chocolate;"></div>
      
    </div>

底部，设置最下面的区域（宽、高、背景颜色）。

flex 属性

 1 、 flex - direction ： 决定主轴方向。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2 、   flex - wrap ： 当图片、文字排列空间不足，换行时，可用该属性决定轴线排列。

  flex - wrap : nowrap (默认)  不换行。

 flex - wrap ：  wrap (换行，第一行在上面)

flex -  wrap ：  wrap - reverse (第一行在下面).

 3 、 flex - flow ：取值是 flex -direction 和 flex -wrap 。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

 4  、justify -  content : 定义了项目在主轴上的对齐方式。

1 、 flex-start（默认值）：左对齐。

2 、 flex-end：右对齐。

3 、 center： 居中。

4 、space-between：两端对齐，项目之间的间隔都相等。。

5 、space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

这些都是常用的。

谢谢！