flexbox彈性布局

本文轉載自查看原文 2019-07-02 11:46 1641

布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。

2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應式地實現各種頁面布局。

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為Flex布局。

.box{ display: flex; }

行內元素也可以使用Flex布局。

.box{ display: inline-flex; }

Webkit內核的瀏覽器，必須加上-webkit前綴。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

雖然 Flexbox 非常適合縮放，對齊和重新排序元素，但以下情況應該盡量避免使用 Flexbox 布局：

1.整體頁面布局

2.完全支持舊瀏覽器的網站

舊版瀏覽器，如IE 11或更低版本，不支持或僅部分支持 Flexbox 。如果你想安全的使用頁面正常呈現，你應該退回到其他的 CSS 布局方式，比如結合float 的 display: inline-block 或者 display: table等。但是，如果您只針對現代瀏覽器，那么 Flexbox 絕對值得一試。

基本概念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

屬性

flex-direction

　　默認橫向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
    }
    /* 以下為輔助樣式 */
    
    .flex-container {
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        padding: 20px;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
    </div>
</body>

</html>

flex-container添加：

flex-direction: column;

會顯示為縱向排列

也可以通過設置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項以相反的順序排列

注意：

正常排序和反向排序是對項目在容器里的代碼順序，不是按里面值排序，比如上例中第一個項目的內容設置為2，第二個設置為1，反向后會變成1，2

容器寬默認充滿父元素，高由里面的項目高決定

沒有定義寬高的情況下，橫向排列時，項目的寬默認由里面的內容決定，高充滿容器

縱向排列時，寬充滿容器，高由內容決定

justify-content

　　justify-content屬性定義了項目在主軸上的對齊方式。

.flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

效果：

row-reverse會讓容器里的項目按內容反向排列，並且沿主軸右對齊，加上flex-end，又會使item左對齊

justify-content還可以設置為以下值：

flex-start | flex-end | center | space-between | space-around | space-evenly;

space-between：兩端對齊，項目之間的間隔都相等

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

space-evenly : flex 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等。

設置了justify-content后再還可以單獨設置item的margin：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    /* 以下為輔助樣式 */
    
    .flex-container {
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        padding: 20px;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item" style="margin-right: 20px;margin-left: 400px;">3</div>
    </div>
</body>

</html>

效果

align-items

　　align-items屬性定義項目在交叉軸上如何對齊。

align-items: flex-start | flex-end | center | baseline | stretch;

　　stretch：如果項目未設置高度或設為auto，交叉軸對齊方式默認值為stretch，將占滿整個容器的高度

flex-start：如果項目設置了高度，交叉軸對齊方式默認值為 flex-start

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center
    }
    
    .flex-container {
        height: 60px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>

</html>

可以在某個特定的 flex 項上使用 align-self CSS 屬性，來使該特定的 flex 項與容器中的其他 flex 項進行對齊。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center
    }
    
    .flex-bottom {
        align-self: flex-end
    }
    
    .flex-container {
        height: 60px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item flex-bottom">3</div>
    </div>
</body>

</html>

flex-wrap

　　flex 項不允許多行/列排列，如果 flex 容器尺寸對於所有 flex 項來說不夠大，那么flex 項將被調整大小以適應單行或列排列。
通過添加 flex-wrap: wrap ，可以將溢出容器的 flex 項將被排列到另一行/列中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100px;
        height: 60px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>

    </div>
</body>

</html>

align-content

　　多行/列排列的 flex 項在交叉軸上的對齊方式

默認情況下，當 flex 容器的交叉軸（cross axis）上存在多余空間時，您可以在 flex 容器上設置 align-content，以控制 flex 項在交叉軸（cross axis）上的對齊方式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默認）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-evenly;
    }
    
    .flex-container {
        width: 100px;
        height: 300px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item ">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>

    </div>
</body>

</html>

flex-grow

flex-grow 只有在 flex 容器中有剩余空間時才會生效。flex 項的 flex-grow 屬性指定該 flex 項相對於其他 flex 項將拉伸多少，以填充 flex 容器。默認值為1。當設置為 0 時，該 flex 項將不會被拉伸去填補剩余空間。在這個例子中，兩個項的比例是 1:2，意思是在被拉伸時，第一個 flex 項將占用剩余空間的 1/3，而第二個 flex 項將占據剩余空間的 1/3的2/3。(如果item不定義flex-grow，也不定義寬度，則item寬度由內容決定)

html:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.flex-container {

display: flex;

width: 180px;

padding: 10px;

background-color: #F0f0f0;

}

.flex-item1 {

flex-grow: 0;

}

.flex-item2 {

flex-grow: 1;

}

.flex-item3 {

flex-grow: 2;

}

.flex-container .flex-item {

padding: 20px 0;

text-align: center;

width: 30px;

background-color: #B1FF84;

}

.flex-container .flex-item:first-child {

background-color: #F5DE25;

}

.flex-container .flex-item:last-child {

background-color: #90D9F7;

}

</style>

<body>

</div>

</body>

</html>

上例中，item的寬度即使不定義，item2和item3也會拉升，item1寬度由內容決定

flex-shrink:收縮：

flex-shrink 只有在 flex 容器空間不足時才會生效。它指定 flex 項相對於其他 flex 項將縮小多少，以使 flex 項不會溢出 flex 容器。默認值為 1。當設置為0時，該 flex 項將不會被收縮。在這個例子中，比例是1：2，意思是在收縮時，第一項將收縮 1/3 ，而第二個項目將被收縮 2/3 。注： flex-shrink 和 flex-grow 正好相反

.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}

案例

響應式菜單

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /*Flexbox是一個相當優秀的屬性，它可能會成為未來版面布局的一部分。
    如果考慮到只處理移動方面的，那么兼容性就可以忽略了。
    -moz代表firefox瀏覽器私有屬性
    -ms代表IE瀏覽器私有屬性
    -webkit代表chrome、safari私有屬性*/
    
    .navigation {
        list-style: none;
        margin: 0;
        background: deepskyblue;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        /*多欄多列布局*/
        -webkit-flex-flow: row wrap;
        /*讓靈活的項目在必要的時候進行拆行*/
        justify-content: flex-end;
    }
    
    .navigation a {
        text-decoration: none;
        display: block;
        padding: 1em;
        color: white
    }
    
    .navigation a:hover {
        background: #00AEE8
    }
    
    @media all and (max-width:800px) {
        .navigation {
            justify-content: space-around
        }
    }
    
    @media all and (max-width:600px) {
        .navigation {
            -webkit-flex-flow: column wrap;
            padding: 0
        }
    }
    /*寬度小於600的時候自動換行：*/
    
    .navigation a {
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1)
    }
    
    .navigation li:last-of-type a {
        background: #00AEE8;
        border-bottom: 0;
    }
    /*指定父元素的最后一個 li 元素的背景色： li:nth-child(3) li的第3個元素   li:first-child 父元素的第一個子元素li里的內容*/
</style>

<body>
    <ul class="navigation">
        <li><a href="#">首頁</a></li>
        <li><a href="#">簡介</a></li>
        <li><a href="#">公司介紹</a></li>
        <li><a href="#">聯系我們</a></li>
    </ul>
</body>

</html>

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

2.默認情況下，每個flex項目的寬高由內容決定

3.通過媒體查詢，瀏覽器寬度小於800時，讓項目在主軸均勻分隔，小於600時，變為縱向排列

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 布局神器：Flexbox Flexbox（彈性盒模型）完全指南 Flutter布局----彈性布局 (Flex) 我喜歡的彈性布局 display:flex彈性布局淺談彈性盒子布局彈性布局 flex CSS3之彈性布局彈性布局的屬性 Flexbox Froggy：練習 Flex 布局的小游戲

flexbox彈性布局

基本概念

屬性

align-content

案例

免責聲明！