CSS3(5)---伸縮佈局(Flex)

時間 2020-01-12

標籤 css3 css 伸縮佈局 flex 欄目 CSS 简体版

原文原文鏈接

CSS3(5)---伸縮佈局

有關頁面佈局以前寫過三篇相關文章：css

一、CSS(5)---盒子模型html

二、CSS(6)---浮動(float)css3

三、CSS(8)---定位(position)web

1、什麼是Flex 佈局

一、Flex 佈局特色

上面三種佈局都是基於盒狀模型。依賴 display屬性 + position屬性 + float屬性。它對於有些特殊佈局並不友好，好比，垂直居中就不容易實現，會有溢出容器的問題。瀏覽器

Flex是意思是」彈性佈局」，它能夠爲盒狀模型提供最大的靈活性。主要思想是讓容器有能力讓其子項目可以改變其寬度、高度、順序，以最佳的方式填充可用空間。佈局

簡單來說就是當你設置好父元素的寬度或者高度,對於它的子元素會根據父類的寬度或者高度來填充可用空間。flex

二、Flex 佈局

任何一個容器均可以指定爲 Flex 佈局。url

.box{
  display: flex;
}

行內元素也可使用 Flex 佈局。spa

.box{
  display: inline-flex;
}

注意 設爲 Flex 佈局後，CSS的columns在伸縮容器上沒有效果。子元素(伸縮項目)的 float、clear和vertical-align屬性將失效code

2、重要概念

一、容器和項目

容器 採用Flex佈局的元素，稱爲Flex容器，簡稱」容器」。(父元素)

項目 容器下全部子元素自動成爲容器成員，簡稱」項目」。（父元素下的子元素）

二、主軸和交叉軸

(盜圖這幅圖本身畫太費時間了）

容器默認存在兩根軸：水平的叫主軸 和 垂直的叫交叉軸 。

主軸的開始位置叫作 main start，結束位置叫作 main end；交叉軸的開始位置叫作 cross start，結束位置叫作 cross end。

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

3、容器的屬性

上面解釋了什麼是容器，簡單理解就是父元素上設置的屬性

有6個屬性設置在容器上flex-direction、flex-wrap 、flex-flow 、justify-content、align-items 、align-content

一、flex-direction(伸縮流方向)

重點 flex-direction 屬性決定 主軸的方向（即項目的排列方向）。

它有4個屬性值。

flex-direction: row | row-reverse | column | column-reverse;

效果

row（默認值）:       主軸爲水平方向，起點在左端。 
row-reverse:       主軸爲水平方向，起點在右端。 
column:            主軸爲垂直方向，起點在上沿。
column-reverse:    主軸爲垂直方向，起點在下沿。

二、flex-wrap(換行)

項目(子元素)在容器(父元素)中有時候也會溢出伸縮容器。與傳統的CSS盒模型同樣，CSS容許使用overflow:hidden 屬性來處理溢出內容的顯示方式。在容器中有一個

換行屬性，主要用來設置容器中的項目是單行顯示仍是多行顯示，以及決定側軸的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

- nowrap:          伸縮容器單行顯示。（默認）  
- wrap:            換行，第一行在上方。 
- wrap-reverse:    換行，第一行在下方。

三、flex-flow(伸縮方向與換行)

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

flex-flow: <flex-direction> || <flex-wrap>;

四、justify-content(主軸對齊)

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

屬性值

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start(默認值):    左對齊  
  flex-end:             右對齊 
  center:               居中  
  space-between:        兩端對齊，項目之間的間隔都相等。 
  space-around:         每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

五、 align-items(側軸對齊)

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

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

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

flex-start:         交叉軸的起點對齊。  
flex-end:           交叉軸的終點對齊。 
center:             交叉軸的中點對齊。   
baseline:           項目的第一行文字的基線對齊。 
stretch(默認值):     若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

六、 align-content(多根軸線的對齊)

說明 align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

該屬性可能取6個值。

flex-start:      與交叉軸的起點對齊。
flex-end:        與交叉軸的終點對齊。
center:          與交叉軸的中點對齊。
space-between:   與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around:    每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(默認值):  軸線佔滿整個交叉軸。

4、項目的屬性

上面說明，項目就是父元素中的子元素。如下6個屬性設置在項目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

一、order屬性

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

order: <integer>;

二、flex-grow屬性

說明 flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

三、flex-shrink屬性

說明 flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

負值對該屬性無效。

四、 flex-basis屬性

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

5 flex屬性

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

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

六、align-self屬性

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

5、示例

一、水平佈局

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平佈局</title>
    <style>

    section {
        width: 50%;
        height: 150px;
        /*background-color: pink;*/
        margin: 100px auto;
        border: 2px solid red; 

        /*父親添加 伸縮佈局*/
        display: flex;    
    }
    section div {   
        height: 100%;
        flex: 1;   /* 孩子的份數*/

    }
    section div:nth-child(1) {
        background-color: pink;
        flex:  2;
    }
    section div:nth-child(2) {
        background-color: purple;
        margin: 0 10px;
    }
    section div:nth-child(3) {
        background-color: yellow;
        flex: 3;
    }

    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

二、垂直分佈

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平佈局</title>
    <style>

    section {
        width: 50%;
        height: 150px;
        /*background-color: pink;*/
        margin: 100px auto;
        border: 2px solid red; 

        /*父親添加 伸縮佈局*/
        display: flex;    
    }
    section div {   
        height: 100%;
        flex: 1;   /* 孩子的份數*/

    }
    section div:nth-child(1) {
        background-color: pink;
        flex:  2;
    }
    section div:nth-child(2) {
        background-color: purple;
        margin: 0 10px;
    }
    section div:nth-child(3) {
        background-color: yellow;
        flex: 3;
    }

    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

三、攜程網案例

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html, body {
        min-width: 320px; 
        max-width: 540px;
        margin: 100px auto;
        font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
    }
    header {
        height: 108px;
    }
    header img {
        height: 100%;
        width: auto;
    }
    nav {
        border: 1px solid #ccc;
        padding: 4px;
    }
    nav  a  {
        text-decoration: none;
        color: #fff;
        text-shadow: 0 2px 1px rgba(0,0,0,.2);
        /*text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;*/
    }
    .row {
        height: 90px;
        display: flex; /*伸縮佈局*/
        border-radius: 5px; 
        overflow: hidden;
        margin-bottom: 5px;
    }
    .row div {
        height: 100%;
        flex: 1;
        background-color: #FF697A;
        border-right: 1px solid #fff;
    }
    .row div:nth-child(3) {
        border-right: 0;
    }
    .row div a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .row33 {
        display: flex;
        flex-direction: column;
    }
    .row33 a {
        flex: 1;
        text-align: center;
        line-height: 45px;
    }
    .row33 a:first-child {
        border-bottom: 1px solid #fff;
    }
    .row em {
        display: block;
        height: 45px;
        text-align: center;
        line-height: 45px;
        font-style: normal;
    }
    .row i {
        display: block;
        width: 43px;
        height: 43px;
        margin: -5px auto 0;
        background: url(images/ctrip.png) no-repeat 0 -127px;
        -webkit-background-size: 104px;  /* 前綴 */
        -moz-background-size: 104px;  /* 前綴 火狐 */
        -ms-background-size: 104px;  /* 前綴 ie */
        -o-background-size: 104px;  /* 前綴 ie */
        background-size: 104px;

    }
    .row .icon-flight {
        background-position: 0 -288px;
    }

    </style>
</head>
<body>
    <header>
        <img src="images/banner.jpg" height="307" width="1536" alt="">
    </header>
    <nav>
        <div class="row">
            <div>
                <a href="#">
                    <em>酒店</em>
                    <i></i>
                </a>
            </div>
            <div class="row33">
                <a href="#">海外酒店</a>
                <a href="#">特價酒店</a>
            </div>
            <div class="row33">
                <a href="#">團購</a>
                <a href="#">同福客棧</a>
            </div>
            
        </div>
        <div class="row">
            <div>
                <a href="#">
                    <em>酒店</em>
                    <i class="icon-flight"></i>
                </a>
            </div>
            <div class="row33">
                <a href="#">海外酒店</a>
                <a href="#">特價酒店</a>
            </div>
            <div class="row33">
                <a href="#">團購</a>
                <a href="#">同福客棧</a>
            </div>
            
        </div>
        <div class="row">
            <div>
                <a href="#">
                    <em>酒店</em>
                    <i></i>
                </a>
            </div>
            <div class="row33">
                <a href="#">海外酒店</a>
                <a href="#">特價酒店</a>
            </div>
            <div class="row33">
                <a href="#">團購</a>
                <a href="#">同福客棧</a>
            </div>
            
        </div>
        <div class="row">
            <div class="row33">
                <a href="#">海外酒店</a>
                <a href="#">特價酒店</a>
            </div>
            <div class="row33">
                <a href="#">海外酒店</a>
                <a href="#">特價酒店</a>
            </div>
            <div class="row33">
                <a href="#">團購</a>
                <a href="#">同福客棧</a>
            </div>
            
        </div>
    </nav>
</body>
</html>

你若是願意有所做爲，就必須善始善終。(19)

相關標籤/搜索

每日一句

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