css flex 彈性盒子佈局

前言

CSS3中的 flex 屬性，在佈局方面做了非常大的改進，使得我們對多個元素之間的佈局排列變得十分靈活，適應性非常強。其強大的伸縮性和自適應性，在網頁開中可以發揮極大的作用。

flex 佈局是加在父元素上面得，然後主軸和側軸，相當於 x , y 軸（這句話要注意），但是有屬性可以控制其轉換，下面會有說明，所以纔會有主軸和側軸得說法，並沒有用 x , y 軸去定義。

flex 初體驗

我們先來看看下面這個最簡單的佈局：

上面這張圖中的佈局是我們都熟悉的：默認文檔流中，在一個父容器裏放置多個塊級的子元素，那麼，這些子元素會默認從上往下排列。

在此基礎之上，如果我給父容器僅僅加一個 display: flex屬性，此時，這些子元素的佈局會搖身一變：

沒錯，子元素們會在水平方向上，從左至右排列，就是這麼神奇。到此爲止，你已經掌握了關於 flex 的一半的知識。

flex 佈局的優勢

1、flex 佈局的子元素不會脫離文檔流，很好地遵從了“流的特性”。

但你如果用 float 來做佈局，float 屬性的元素會脫離文檔流，而且會涉及到各種 BFC、清除浮動的問題。浮動相關的問題，比較麻煩，所以也成了面試必問的經典題目。但有了 flex 佈局之後，這些問題都不存在的。

2、flex 是一種現代的佈局方式，是 W3C 第一次提供真正用於佈局的 CSS 規範。 flex 非常提供了豐富的屬性，非常靈活，讓佈局的實現更佳多樣化，且方便易用。

flex 唯一的缺點就在於，它不支持低版本的 IE 瀏覽器。

flex 的兼容性問題

上圖中可以看到， flex 佈局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。如果你的頁面不需要處理 IE瀏覽器的兼容性問題，則可以放心大膽地使用 flex 佈局。

但是，比如網易新聞、淘寶這樣的大型網站，面對的是海量用戶，即便使用低版本瀏覽器的用戶比例很少，但絕對基數仍然是很龐大的。因此，這些網站爲了兼容低版本的 IE 瀏覽器，暫時還不敢嘗試使用 flex 佈局。

概念：彈性盒子、子元素

在講 flex 的知識點之前，我們事先約定兩個概念：

彈性盒子：指的是使用 display:flex 或 display:inline-flex 聲明的父容器。
子元素/彈性元素：指的是父容器裏面的子元素們（父容器被聲明爲 flex 盒子的情況下）。

概念：主軸和側軸

在上面的“初體驗”例子中，我們發現，彈性盒子裏面的子元素們，默認是從左至右排列的，這個方向，代表的就是主軸的方向。

在此，我們引入主軸和側軸的概念。

如上圖所示：

主軸：flex容器的主軸，默認是水平方向，從左向右。
側軸：與主軸垂直的軸稱作側軸，默認是垂直方向，從上往下。

PS：主軸和側軸並不是固定不變的，可以通過 flex-direction 更換方向，我們在後面會講到。

彈性盒子

聲明定義

使用 display:flex 或 display:inline-flex 聲明一個父容器爲彈性盒子。此時，這個父容器裏的子元素們，會遵循彈性佈局。

備註：一般是用 display:flex這個屬性。display:inline-flex用得較少。

flex-direction 屬性

flex-direction：用於設置盒子中子元素的排列方向。屬性值可以是：

屬性值	描述
row	從左到右水平排列子元素（默認值）
column	從上到下垂直排列子元素
row-reverse	從右向左排列子元素
column-reverse	從下到上垂直排列子元素

備註：如果我們不給父容器寫flex-direction這個屬性，那麼，子元素默認就是從左到右排列的。

代碼演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
       body{
           background-color: #eee;
           font-family: "Microsoft Yahei";
           font-size:22px;
       }

        h3{
            font-weight: normal;
        }
        section{
            width: 1000px;

            margin:40px auto;
        }

        ul{
            background-color: #fff;
            border: 1px solid #ccc;

        }

        ul li{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin:10px;
        }
        section:nth-child(1) ul{
            overflow: hidden; /* 清除浮動 */
        }
        section:nth-child(1) ul li{
            float: left;
        }
        /* 設置伸縮盒子*/
        section:nth-child(2) ul{
            display: flex;
        }

        section:nth-child(3) ul{
            /* 設置伸縮佈局*/
            display: flex;
            /* 設置主軸方向*/
            flex-direction: row;
        }

        section:nth-child(4) ul{
            /* 設置伸縮佈局*/
            display: flex;
            /* 設置主軸方向 :水平翻轉*/
            flex-direction: row-reverse;
        }

        section:nth-child(5) ul{
            /* 設置伸縮佈局*/
            display: flex;
            /* 設置主軸方向 :垂直*/
            flex-direction: column;
        }

        section:nth-child(6) ul{
            /* 設置伸縮佈局*/
            display: flex;
            /* 設置主軸方向 :垂直*/
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <section>
        <h3>傳統佈局</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>伸縮佈局 display:flex</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸方向 flex-direction:row</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸方向 flex-direction:row-reverse</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸方向 flex-direction:column</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸方向 flex-direction:column-reverse</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
</body>
</html>

flex-wrap 屬性

flex-wrap：控制子元素溢出時的換行處理。

justify-content 屬性

justify-content：控制子元素在主軸上的排列方式。

彈性元素

justify-content 屬性

justify-content: flex-start; 設置子元素在主軸上的對齊方式。屬性值可以是：
- flex-start 從主軸的起點對齊（默認值）
- flex-end 從主軸的終點對齊
- center 居中對齊
- space-around 在父盒子裏平分
- space-between 兩端對齊平分

代碼演示：（在瀏覽器中打開看效果）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style:none;}
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";

        }
        section{
            width: 1000px;
            margin:50px auto;
        }
        section h3{
            font-size:22px;
            font-weight: normal;
        }

        ul{
            border: 1px solid #999;
            background-color: #fff;
            display: flex;

        }

        ul li{
            width: 200px;
            height: 200px;
            background: pink;
            margin:10px;

        }

        section:nth-child(1) ul{
            /* 主軸對齊方式：從主軸開始的方向對齊*/
            justify-content: flex-start;
        }

        section:nth-child(2) ul{
            /* 主軸對齊方式：從主軸結束的方向對齊*/
            justify-content: flex-end;
        }

        section:nth-child(3) ul{
            /* 主軸對齊方式：居中對齊*/
            justify-content: center;
        }

        section:nth-child(4) ul{
            /* 主軸對齊方式：在父盒子中平分*/
            justify-content: space-around;

           }

        section:nth-child(5) ul{
            /* 主軸對齊方式：兩端對齊 平分*/
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <section>
        <h3>主軸的對齊方式：justify-content:flex-start</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸的對齊方式：justify-content:flex-end</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸的對齊方式：justify-content:center</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸的對齊方式：justify-content:space-round</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主軸的對齊方式：justify-content:space-bettwen</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </section>
</body>
</html>

align-items 屬性

align-items：設置子元素在側軸上的對齊方式。屬性值可以是：
- flex-start 從側軸開始的方向對齊
- flex-end 從側軸結束的方向對齊
- baseline 基線默認同flex-start
- center 中間對齊
- stretch 拉伸

代碼演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style:none;
        }
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";

        }
        section{
            width: 1000px;
            margin:50px auto;
        }
        section h3{
            font-size:22px;
            font-weight: normal;
        }

        ul{
            border: 1px solid #999;
            background-color: #fff;
            display: flex;
            height:500px;

        }

        ul li{
            width: 200px;
            height: 200px;
            background: pink;
            margin:10px;

        }

        section:nth-child(1) ul{
            /* 側軸對齊方式 ：從側軸開始的方向對齊*/
            align-items:flex-start;
        }

        section:nth-child(2) ul{
            /* 側軸對齊方式 ：從側軸結束的方向對齊*/
            align-items:flex-end;
        }

        section:nth-child(3) ul{
            /* 側軸對齊方式 ：居中*/
            align-items:center;
        }

        section:nth-child(4) ul{
            /* 側軸對齊方式 ：基線 默認同flex-start*/
            align-items:baseline;
        }

        section:nth-child(5) ul{
            /* 側軸對齊方式 ：拉伸*/
            align-items:stretch;

        }

        section:nth-child(5) ul li{
            height:auto;
        }


    </style>
</head>
<body>
<section>
    <h3>側軸的對齊方式:align-items ：flex-start</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>側軸的對齊方式：align-items:flex-end</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>側軸的對齊方式：align-items:center</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>側軸的對齊方式：align-itmes:baseline</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>側軸的對齊方式：align-itmes: stretch</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
</body>
</html>

`flex`屬性：設置子盒子的權重

代碼演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style:none;
        }
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";

        }
        section{
            width: 1000px;
            margin:50px auto;
        }
        section h3{
            font-size:22px;
            font-weight: normal;
        }

        ul{
            border: 1px solid #999;
            background-color: #fff;
            display: flex;

        }

        ul li{
            width: 200px;
            height: 200px;
            background: pink;
            margin:10px;

        }

        section:nth-child(1) ul li:nth-child(1){
            flex:1;
        }

        section:nth-child(1) ul li:nth-child(2){
            flex:1;
        }

        section:nth-child(1) ul li:nth-child(3){
            flex:8;
        }

        section:nth-child(2) ul li:nth-child(1){

        }

        section:nth-child(2) ul li:nth-child(2){
            flex:1;
        }

        section:nth-child(2) ul li:nth-child(3){
           flex:4;
        }


    </style>
</head>
<body>
<section>
    <h3>伸縮比例:flex</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>伸縮比例:flex</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>


</body>
</html>

css flex 彈性盒子佈局