探討彈性佈局Flexible Box

時間 2019-12-15

標籤探討彈性佈局 flexible box 欄目 Flex 简体版

原文原文鏈接

早以前有所瞭解，如今有時間整理一下，跟你們分享學習。css

雖然Flex佈局09年就被W3C所提出，可是目前瀏覽器支持上還不是很好，網上找的一張圖片，僅供參考：html

咱們先從簡單講起。若是僅僅只想實現一個柵格佈局，不必引入一個複雜的框架（如bootstrap），短短几行代碼也能實現該功能。bootstrap

例子：有個父div，三個子div，寬度比是1:2:1，如下代碼：瀏覽器

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            padding: 20px;
        }
        .flex{
            display:flex;
        }
        .flex div{
            text-align: center;
        }
        .one{
            background: blue;
            flex:1;
        }
        .two{
            flex:2;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="one">one</div>
    </div>
</body>
</html>

顯示以下：框架

解讀：把父div設置爲display:flex;後，它的全部子元素自動成爲容器成員。同時，全部的子元素的float、clear、vertical-align都會失效。子元素有個屬性flew，其實接受的是3個值，分別是flex-grow，flex-shrink，flex-basis，後兩個屬性選填（這裏用不上便不填，後面再作介紹），flex-grow：定義當前子元素的比例。
佈局

Q：若是我想要列與列之間有等距間隔怎麼辦？學習

A：你能夠添加 margin 到列上。你也能夠添加 padding 到列上。固然父div有個寬度補齊（justification）的屬性也能夠實現。flex

代碼稍做修改：ui

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            padding: 20px;
        }
        .flex{
            display:flex;
            justify-content: space-between;
        }
        .flex div{
            text-align: center;
        }
        .one{
            background: blue;
            width: 23%;
        }
        .two{
            background: yellow;
            width:48%;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="one">one</div>
    </div>
</body>
</html>

顯示以下：spa

解讀：稍做介紹下justify-content屬性。它定義子元素在主軸上的對齊方式，一共有5個值：

flex-start（默認值）：左對齊

flex-end：右對齊

center：居中

space-between：兩端對齊，子元素之間的間隔都相等

space-around：每一個子元素兩側的間隔都相等，因此就會造成子元素與子元素之間的間隔是子元素與兩端之間的間隔的2倍

以上是一些簡單的用法，下面想詳細的記錄下flex的其餘用法，跟你們分享，不對之處請多多指出。

—————————————————————————————————分割線—————————————————————————————————————

將一個容器（爲避免混淆，暫稱父元素）設置display爲flex後，父元素便擁有如下屬性：

一、flex-direction：決定子元素的排列方向。

row：默認值，水平方向排列，起點在左邊。

row-reverse：水平方向排列，起點在右邊。

column：垂直方向，起點在上沿。

column-reverse：垂直方向，起點在下沿。

二、flex-wrap：定義一行排不下時如何換行。

nowrap（默認）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

三、flex-flow：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

四、justify-content：前面已經介紹，忘記了請往前看。

五、align-items：還記得flex-direction嗎，這個屬性相似於定義子元素在垂直方向上面的對齊方式。

先來段代碼：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .flex{
            display:flex;
            width:200px;
            height:200px;
            background: #ccc;
            margin:50px auto;
        }
        .flex div{
            text-align: center;
        }
        .one{
            background: blue;
            flex:1;
        }
        .two{
            background: yellow;
            flex:2;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="one"><p></p>one1</div>
        <div class="two">two</div>
        <div class="one">one2</div>
    </div>
</body>
</html>

（此時子元素並沒設置高度以及父元素沒有設置align-items固然是按照默認值顯示）

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

修改css

.flex{
    display:flex;
    width:200px;
    height:200px;
    background: #ccc;
    margin:50px auto;
    align-items:flex-start;
}
.one{
    background: blue;
    flex:1;
    height: 50px;
}
.two{
    background: yellow;
    flex:2;
    height: 100px;
}

2）flex-start：上沿對齊。

3）flex-end：下沿對齊。

4）center：居中對齊。

5）baseline: 子元素的第一行文字的基線對齊。

子元素有如下屬性：

一、order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

.one{
    background: blue;
    flex:1;
    order: 1;
}
.two{
    background: yellow;
    flex:2;
}

二、flex-grow：定義當前子元素的比例，好比上面one比例是1，two比例是2。

三、flex-shrink：可選屬性。屬性定義了子元素的縮小比例，默認爲1，即若是空間不足，該子元素將縮小。若是全部子元素的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個子元素的flex-shrink屬性爲0，其餘子元素都爲1，則空間不足時，屬性爲0的不縮小，負值對該屬性無效。

四、flex-basis：可選屬性。定義分配空間前，該子元素的寬度。默認值auto，可設置固定值（如100px），設置後該子元素將佔據固定空間。

.flex{
    display:flex;
    width:200px;
    height:200px;
    background: #ccc;
    margin:50px auto;
}
.one{
    background: blue;
    flex-basis:80px;
}
.two{
    background: yellow;
    flex:2;
}

五、簡寫的flex屬性。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

六、align-self：align-self屬性容許單個子元素有與其餘子元素不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .flex{
            display:flex;
            width:200px;
            height:200px;
            background: #ccc;
            margin:50px auto;
            align-items:center;
        }
        .one{
            background: blue;
            flex:1;
            height: 50px;
        }
        .two{
            background: yellow;
            flex:2;
            height: 100px;
            align-self:flex-end;
        }
        .flex div{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="one">one1</div>
        <div class="two">two</div>
        <div class="one">one2</div>
    </div>
</body>
</html>

———————————————————————————————分割線——————————————————————————————————

學以至用，咱們來用Flex佈局實現聖盃佈局

要實現的效果：上中下三塊，其中中間一塊爲左中右，左右等寬，中間佔其他寬度。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .main{
            width:100%;
            height:100%;
            display: flex;
            flex-direction: column;
        }
        .header,.footer{
            flex: 1;
            background: yellow;
        }
        .middle{
            flex: 5;
            display:flex;
        }
        .center{
            flex: 1;
            background: #ccc;
        }
        .left,.right{
            background:green;
            flex: 0 0 100px;
        }
        .left{
            order: -1;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="header"></div>
        <div class="middle">
            <div class="center"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

分享完畢，歡迎轉載，請註明出處！

參考連接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

相關標籤/搜索

每日一句

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