1、flex布局與傳統布局的區別

傳統布局：

兼容性好但是布局繁瑣
局限性，不能再移動端很好的布局

flex布局：

操作方便，布局簡單，移動端應用廣泛
但是IE11或更低版本不支持flex布局

使用范圍：
1、如果是PC端頁面布局，建議使用傳統布局
2、如果是移動端或者不考慮兼容性問題的PC端，建議使用flex彈性布局

2、flex布局原理

flex意為彈性布局，通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局

flex布局注意事項

當我們為父盒子設為flex布局后，子元素的float、clear、和vertical-align屬性都將會失效
伸縮布局 = 彈性布局 = flex布局

3、flex布局父項常見屬性（設置在父元素上的屬性）

flex-direction：設置主軸的方向
justify-content：設置主軸上的子元素的排列方式
flex-wrap：設置子元素是否換行
align-content：設置側軸上的子元素的排列方式(多行)
align-items：設置側軸上的子元素排列方式(單行)
flex-flow：復合屬性，相當于同時設置了flex-direction和flex-wrap

3.1、flex-direction(設置主軸的方向)

在flex布局中，有主軸和側軸的概念之分，即所謂的行與列，默認的主軸方向是從左往右，默認的側軸方向是從上往下。flex-direction屬性決定主軸的方向，也就是決定著子元素的排列方向，其中，主軸和側軸是會變化的，就看flex-direction設置誰作為主軸，子元素就會跟著作為主軸的來排列布局。

屬性值	說明
row	默認值從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

設置側軸排列

          .container {
                display: flex;
                width: 1200px;
                height: 600px;
                margin: 0 auto;             
                background-color:cornsilk;
                /*設置為側軸排列*/
                flex-direction: column;
            }
            .container span {
                width: 200px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                background-color: cornflowerblue;
            }

        <div class="container">
            <span>東</span>
            <span>南</span>
            <span>西</span>
            <span>北</span>
        </div>

效果圖.png

3.2、justify-content(設置主軸上的子元素的排列方式)

justify-content屬性定義了項目在主軸上的對齊方式，使用前提必須確定好誰是主軸.

屬性值	說明
flex-start	默認值，從頭部開始，如果主軸是X軸，則從左往右
flex-end	從尾部開始排列
center	在主軸居中對齊(如果主軸是X軸則水平居中)
space-around	平分父級空間排列
space-between	先兩邊貼邊，再去平分剩下的空間排列

          .flexStart {
                display: flex;
                width: 300px;
                height:80px;
                margin: 0 auto;             
                background-color:cornsilk;
                /*設置子元素排列方式*/
                justify-content: flex-start;
                /*設置為側軸排列*/
                flex-direction: row;
            }
            .flexStart span {
                width: 50px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }

         <div class="flexStart">
            <span>東</span>
            <span>南</span>
            <span>西</span>
            <span>北</span>
          </div>

效果圖示.png

3.3、flex-wrap(設置子元素是否換行)

默認情況下，子元素都排在一條線上（主軸），flex-wrap屬性定義，flex布局中默認是不換行的。意味著隨著子元素不斷增加，會直接改變子元素的寬高，不斷地擠在一行上。

屬性值	說明
nowrap	默認值，不換行
wrap	換行

           .wrapBefore {
                display: flex;
                width: 300px;
                height: 80px;
                margin: 0 auto;
                background-color: cornsilk;
                /*設置元素是否換行*/
                flex-wrap: nowrap;
                /*設置子元素排列方式*/
                justify-content: space-between;
                /*設置為側軸排列*/
                flex-direction: row;
            }
            .wrapAfter {
                display: flex;
                width: 300px;
                height: 80px;
                margin: 0 auto;
                background-color: cornsilk;
                /*設置元素是否換行*/
                flex-wrap: wrap;
                /*設置子元素排列方式*/
                justify-content: space-between;
                /*設置為側軸排列*/
                flex-direction: row;
            }
            
            .wrapBefore span, .wrapAfter span {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }

            <h3>換行前</h3>
            <div class="wrapBefore">
                <span>東</span>
                <span>南</span>
                <span>西</span>
                <span>北</span>
                <span>多的</span>
            </div>
            <h3>換行后</h3>
            <div class="wrapAfter">
                <span>東</span>
                <span>南</span>
                <span>西</span>
                <span>北</span>
                <span>多的</span>
            </div>

效果.png

3.4、 align-items(設置側軸上的子元素排列方式(單行))

align-items設置側軸上的子元素的排列方式(單行的)，這個屬性是控制子元素在側軸(默認是y軸)上的排列方式，在子元素為單個元素的時候去使用。

屬性值	說明
flex-start	默認值，從上到下
flex-end	從下到上
center	垂直居中
stretch	拉伸

            .flexstart {
                display: flex;
                width: 300px;
                height: 80px;
                margin: 0 auto;
                background-color: cornsilk;
                /*設置子元素側軸對齊方式*/
                align-items: flex-start;
                /*設置元素是否換行*/
                flex-wrap: nowrap;
                /*設置子元素排列方式*/
                justify-content: space-between;
                /*設置為側軸排列*/
                flex-direction: row;
            }

            .flexstart span, .flexEnd span, .center span {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }
            .stretch span {
                width: 70px;
                text-align: center;
                line-height: 30px;
                margin-right: 1px;
                background-color: blueviolet;
            }

           <div class="flexstart">
                <span>東</span>
                <span>南</span>
                <span>西</span>
                <span>北</span>
            </div>

效果.png

這里有個特別需要注意的點：在使用拉伸的時候，千萬不能給子元素設置高度，否則它是無法進行拉伸的。

3.5、 align-content(設置側軸上的子元素排列方式(多行))

設置子元素在側軸上的排列方式，并且只能用于子元素出現在換行的情況中，在單行下是沒有任何效果的。

屬性值	說明
flex-start	默認值在側軸的頭部開始排列
flex-end	在側軸的尾部開始排列
center	在側軸中間顯示
space-around	子元素在側軸上平分側軸空間
space-between	子元素在側軸上先分布在兩頭，再去平分剩余空間
stretch	設置子元素高度平分父級元素的高度

          .flexstart {
                display: flex;
                width: 300px;
                height: 200px;
                margin: 0 auto;
                background-color: cornsilk;
                /*設置子元素側軸對齊方式*/
                align-content: flex-start;
                /*設置元素是否換行*/
                flex-wrap: wrap;
                /*設置子元素排列方式*/
                justify-content: space-between;
                /*設置為側軸排列*/
                flex-direction: row;
            }

          .flexstart span {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-top: 1px;
                margin-right: 1px;
                background-color: blueviolet;
            }

圖1.png

圖2.png

3.6、 flex-flow(設置主軸方向以及設置是否換行，一種復合寫法)

flex-flow屬性是flex-direction和flex-wrap屬性的復合屬性

flex-flow:row  wrap; //主軸為x軸，并且換行

4、flex布局子項常見屬性（設置在子元素上的屬性）

flex布局中子元素也存在著相對應的一些屬性

4.1、flex(子元素占的份數)

flex屬性定義子元素分配剩余空間，用flex來表示占的多少份，默認為0
針對這個，可以先了解有名的CSS布局圣杯布局以及雙飛翼布局,大致的效果為兩邊盒子固定，中間自適應。使用flex布局來做的話，就是去處理剩余空間的份數。

          .demo {
                display: flex;
                width: 60%;
                height: 200px;
                /*margin: 0 auto;*/
                border: 1px solid darkblue;
                background-color: azure;
            }
            
            .demo div:nth-child(1){
                width: 100px;
                height: 100%;
                text-align: center;
                line-height: 200px;
                background-color: chocolate;
            }
            .demo div:nth-child(3){
                width: 100px;
                height: 100%;
                text-align: center;
                line-height: 200px;
                background-color: chocolate;
            }
            .demo div:nth-child(2){
                flex: 1;
                height: 100%;
                text-align: center;
                line-height: 200px;
                background-color: blueviolet;
            }

       <div class="demo">
            <div>左側</div>
            <div>中間</div>
            <div>右側</div>
        </div>

css平分剩余空間.gif

4.2、align-self(控制子元素自己在側軸上的排列方式)

align-self屬性允許單個的子元素與其他子元素不一樣的對齊方式，可覆蓋align-items屬性，默認值為auto，表示繼承父元素的align-item屬性，如果沒有父元素，則等同于stretch。

           .demo {
                display: flex;
                width: 60%;
                height: 200px;
                margin: 0 auto;
                /*水平居中*/
                justify-content: center;
                /*垂直居中*/
                align-items: center;
                background-color:bisque;
            }
            
            .demo div {
                width: 15%;
                height: 80px;
                text-align: center;
                line-height: 80px;
                background-color: blueviolet;
            }
            
            .demo div:nth-child(2){
                /*讓第二個子元素flex-end排列*/
                align-self: flex-end;
                
            }

第二個子元素flex-end排列.png

4.3、order(控制子元素的排列順序)

order去控制子元素的排列順序，數值越小的，排列越靠前，默認為0

            .demo {
                display: flex;
                width: 60%;
                height: 200px;
                margin: 0 auto;
                /*水平居中*/
                justify-content: center;
                /*垂直居中*/
                align-items: center;
                background-color:bisque;
            }
            
            .demo div {
                width: 15%;
                height: 80px;
                text-align: center;
                line-height: 80px;
                order: 2;
                background-color: blueviolet;
            }                   
            
            .demo div:nth-child(2){
                /*讓第二個子元素flex-end排列*/
                align-self: flex-end;
                /*將第二個放前面去,order設置小即可*/
                order: 1;
            }

首先給每個子元素設置一個order值，需要調到前面的，單獨提出來將order值設小點即可，想要放到后面order值設大點即可。

將第二個放前面去.png

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Flex布局：Flex布局

Flex布局：Flex布局

1、flex布局與傳統布局的區別

2、flex布局原理

flex布局注意事項

3、flex布局父項常見屬性（設置在父元素上的屬性）

3.1、flex-direction(設置主軸的方向)

3.2、justify-content(設置主軸上的子元素的排列方式)

3.3、flex-wrap(設置子元素是否換行)

3.4、 align-items(設置側軸上的子元素排列方式(單行))

3.5、 align-content(設置側軸上的子元素排列方式(多行))

3.6、 flex-flow(設置主軸方向以及設置是否換行，一種復合寫法)

4、flex布局子項常見屬性（設置在子元素上的屬性）

4.1、flex(子元素占的份數)

4.2、align-self(控制子元素自己在側軸上的排列方式)

4.3、order(控制子元素的排列順序)

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Flex布局：Flex布局

1、flex布局與傳統布局的區別

2、flex布局原理

flex布局注意事項

3、flex布局父項常見屬性（設置在父元素上的屬性）

3.1、flex-direction(設置主軸的方向)

3.2、justify-content(設置主軸上的子元素的排列方式)

3.3、flex-wrap(設置子元素是否換行)

3.4、 align-items(設置側軸上的子元素排列方式(單行))

3.5、 align-content(設置側軸上的子元素排列方式(多行))

3.6、 flex-flow(設置主軸方向以及設置是否換行，一種復合寫法)

4、flex布局子項常見屬性（設置在子元素上的屬性）

4.1、flex(子元素占的份數)

4.2、align-self(控制子元素自己在側軸上的排列方式)

4.3、order(控制子元素的排列順序)

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频