flex佈局（1）：display:flex 佈局應用

時間 2019-11-18

標籤 flex 佈局 display 應用欄目 Flex 简体版

原文原文鏈接

最近愈來愈依賴display:flex 了。原本只是在移動端用來做彈性佈局，如今在PC端，我基本用它來取代 float:left。好比昨天作的一個專題，基本都用 flex 來佈局。html

可是這其中的原理呢，flex佈局的相對於float的優點又在哪呢。只是對這些有一個模糊的概念。web

好比float:left/right 這個功能，通常用來排版。而它的高度塌縮，一些潛在的未被觸發的問題，老是給人一種很「不靠譜」的感受。佈局

先來盤點下float的特性：flex

1. 脫離當前文檔流。浮動盒子會貼着容器或者另外一個浮動元素的邊緣（包括水平方向和垂直方向的邊緣），寬度不夠的話，就排到下一行。url

舉個例子：spa

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: #aedbf0;
            float:left;
        }
        .box2 {
            width: 100px;
            height: 150px;
            background: #ffbe84;
            float:left;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background: #d4e280;
            float:left;
        }
        .parent {
            overflow: hidden;
            padding: 10px;
            border:1px solid #005e96;
            text-align:left;
            width: 250px; /*這裏設置寬度爲250px，沒法容下3個100px寬度的方塊*/
            /*height: 200px;*/
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>

這裏將第二個浮動元素的高度設置爲150px，比其餘多了50。效果以下：code

若是將第一個浮動元素設置爲150px，則效果以下：orm

2. 文檔流的行內元素將會圍繞浮動元素，這個和塊狀元素不同。塊狀元素若是不設置float屬性，則會被浮動盒子覆蓋。好比文字環繞效果。htm

3. 對於浮動元素，top/left/right/bottom, z-index無效。（貌似好久前，我在使用z-index時被這個坑過...）blog

4. 造成 block formatting context （BFC）。建立了 BFC的元素就是一個獨立的盒子，裏面的子元素不會在佈局上影響外面的元素。

2、display: flex

1. 垂直居中 align-items: center;

配合align-items: center，輕鬆達到垂直居中的效果，好用到哭。解決了折磨我幾百年的圖片和多行文字垂直居中的問題。

具體效果能夠點這裏查看，垂直居中的幾個辦法

Flex佈局教程語法篇

在實際開發中，假設我有並列兩個div，兩個div寬度不一致。假設比較小的flex盒子寬度比例設置爲1，那麼另一個的寬度比例 = 大盒子寬度/設置比例爲1的盒子寬度。

這樣，當包裹兩個flex盒子的容器總體寬度須要發生改變時，就不須要再去更改兩個盒子的寬度。

<style>
        .tips {
            max-width: 800px;
            height: 100px;
            display: flex;
            align-items: center; // 在容器設置這個屬性，達到垂直居中效果。
            background-color: #1e5dad;
            border-radius: 15px;
            margin: 25px auto;
        }
        .tips div:nth-child(1) {
            flex: 1; //小盒子比例爲1
            margin-left: 25px;
        }
        .tips div:nth-child(2) {
            flex: 9.5; //大盒子寬度比例 = 大盒子寬度/小盒子寬度
        }
        .tips p {
            color: #fff;
            text-align: left;
            font-size: 20px;
            line-height: 31px;
        }
    </style>
</head>
<body>
<div class="tips">
    <div>
        <img src="images/doc.png" alt="">
    </div>
    <div>
        <p>注意，設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。</p>
    </div>
</div>
</body>

效果圖以下：

再來看看另一個複雜點的例子：

    <style>
        *{ /*實際開發中，別這樣偷懶哦*/
            margin: 0;
            padding: 0;
        }
        .frequency {
            max-width: 1000px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            background-color: #f3f4f6;
            height: 175px;
        }
        .fre_left {
            flex: 1;
        }
        .fre_right {
            flex: 4.78;
        }
        .fre_left div {
            color: #fff;
            width: 100px;
            height: 100px;
            background-color: #3ac1d5;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border: 10px solid #e7eef8;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
        }
        .fre_left p {
            font-size: 26px;
            height: 24px;
            line-height: 31px;
            padding-top: 17px;
        }
        .fre_right ul {
            display: flex;
        }
        ul, ol {
            list-style: none;
        }
        .fre_right ul li {
            flex: 1;
            color: #4c4c52;
            font-size: 16px;
            line-height: 31px;
        }
        .fre_right ul li:before {
            content: url(images/arrow.png);
        }

    </style>
</head>
<body>
<div class="frequency">
    <div class="fre_left">
        <div>
            <p>熱點<br>問題</p>
        </div>

    </div>
    <div class="fre_right">
        <ul>
            <li> 1、Flex 佈局是什麼？</li>
            <li> 2、基本概念</li>
            <li> 3、容器的屬性</li>
        </ul>
        <ul>
            <li> flex-direction屬性決定主軸的方向</li>
            <li> flex-wrap屬性定義如何換行。</li>
            <li> flex-flow屬性默認值爲row nowrap</li>
        </ul>
        <ul>
            <li> justify-content屬性定義了項目在主軸上的對齊方式。</li>
        </ul>
    </div>
</div>
</body>

效果圖以下：

在CSS佈局中，Flex佈局還有許多妙用，等待研究。

可是並非何時都一古腦兒用這個。實際上每一種方式都有它本身的優點和缺陷。

好比，Flex 佈局下，

1. 子元素的float、clear和vertical-align屬性將失效。
2. 移動端img標籤下的圖片，若是設定了寬度，未設定高度，圖片高度產生變形。緣由是：align - items 屬性的默認值：

stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。