彈性盒模型 flex box

時間 2019-11-19

標籤彈性模型 flex box 欄目 Flex 简体版

原文原文鏈接

彈性盒子模型

佈局方案

傳統的佈局方案大多采用div+css+float+position+display來實現，可是隨着css3中彈性盒子模型的推出，在前端佈局方案中就又多出了一項彪悍的選項。
而由於最近在研究小程序，發現中間使用彈性盒子佈局效果更好效率更高一點，因此就將以前學習彈性盒模型的相關知識點整理出來，給你們分享。css

彈性盒模型flex佈局介紹

彈性盒模型(flexbox)又稱爲彈性佈局，是css3中新提出的一種佈局方式，經過彈性佈局，可讓子元素自動調整寬度和高度，從而達到很好的填充任何不一樣屏幕大小的顯示設備的顯示空間。
彈性盒模型與以前的佈局方式是徹底不一樣的兩種，雖然依然採用div+css的方式，可是卻將以前使用的浮動給替換成了彈性佈局。從而使頁面元素佈局方式更加的簡單。
不一樣於咱們後面所學習的網格系統，彈性佈局更加適用於應用組件以及小比例佈局。
在以前,flex經歷了三次迭代，每一次迭代都產生了不一樣的語法，目前咱們學習遵循最終版本的語法。由於以前版本在使用的時候須要考慮兼容問題，而最新版本，全部的瀏覽器都支持無前綴的終極規範。html

彈性盒子模型認知

flex佈局方式是一個完整的佈局模塊，而不是隻某個屬性。flex的佈局主要依靠父容器和元素組成。
父容器稱之爲flex container(flex容器) 而其子元素稱之爲flex item(flex元素)。
而整個flex佈局的核心在於對其方式、排布和順序。前端

彈性盒子模型的使用

想要使用flex佈局，首先要使用display:flex 或者 display:inline-flex來設置父容器。
display:flex 給父元素設置完成後，那麼整個父元素會變成彈性容器，可是是一個塊級元素。
display:inline-flex給父元素設置完成後，那麼整個父元素會變成彈性容器，可是是一個行內塊級元素，有些相似於inline-block的效果。css3

當父容器設置了這個屬性以後，裏面的子元素默認的所有變成flex item (flex元素)
Tip:flex佈局與咱們以前所學習的佈局方式是屬於另一套佈局方案，因此在使用了flex佈局以後，如Block」，「inline」，「float」和「text-align」等一些屬性會失效。小程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container-flex {
            width: 600px;
            border:1px solid #ccc;
            display:flex;
        }
        .container-inline {
            width: 600px;
            border:1px solid #ccc;
            display:inline-flex;
        }
        .container-flex div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .container-inline div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

執行的效果以下：微信小程序

必備名詞解釋

在使用彈性盒子模型以前，須要瞭解一些彈性盒模型的基礎概念名詞。瀏覽器

main axis 主軸
cross axis 交叉軸/側軸與主軸垂直
main start 主軸起點邊
main end 主軸終點邊
cross start 交叉軸起點邊
cross end 交叉軸終點邊微信

爲何使用彈性盒子模型

彈性盒子模型在開發手機端的時候使用頻率較高，在微信小程序開發的時候也是使用頻率很是高的技術，能夠經過幾個實例來看一下彈性盒子的好處：佈局

實例1：學習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*啓用flex佈局*/
            background-color: pink;
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代碼結果以下：

在上述實例中須要注意的點：
① 啓用flex佈局 display:flex
② 父元素的子元素在父元素設置了display:flex以後，子元素會自動的變爲彈性盒子的子元素，
被稱爲flex items
③ 默認狀況，全部的 flex-item 會按照 flex 容器的頂部和左側對齊。

實例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*啓用flex佈局*/
            background-color: pink;
            justify-content:flex-start;/*默認*/
            justify-content:flex-end;/*在主軸的末端對其*/
            justify-content:center;/*在主軸的中間對其*/
            justify-content:space-between;/*在整個主軸中平均分配空間，不管其中有多少個元素*/
            justify-content:space-around;/*Flex-item 默認會被均勻的分佈，可是每個
                                        都會在其給定的空間內居中顯示。*/
            align-items:center;/*讓items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代碼效果以下：

咱們能夠經過很是簡單的屬性設置來調整對其方式，例如：
justify-content: flex-start / flex-end /center /space-between /space-around
咱們也能夠經過align-items:center 屬性讓 items 在垂直方向居中。

實例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*啓用flex佈局*/
            background-color: pink;
            justify-content:flex-start;/*默認*/
            justify-content:flex-end;/*在主軸的末端對其*/
            justify-content:center;/*在主軸的中間對其*/
            justify-content:space-between;/*在整個主軸中平均分配空間，不管其中有多少個元素*/
            justify-content:space-around;/*Flex-item 默認會被均勻的分佈，可是每個
                                        都會在其給定的空間內居中顯示。*/
            align-items:center;/*讓items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
            order: -1; /*讓正方形顯示在第一位而不是中間*/
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

實例3 和實例2 大致類似，可是在.square類裏存在一句order:-1，能夠更改元素的渲染順序。這個是彈性盒模型中一個很是厲害的一個方面。

實例3代碼效果以下：

flex佈局方式屬性

在flex整個體系當中，大致上能夠分爲兩類，一類是給父容器設置的屬性，一類是給父容器中子元素設置的屬性。

彈性容器屬性 -- 給父元素設置的屬性

1.flex-direction 定義內部元素如何在flex容器中佈局，定義了主軸的方向(是正是反)。

語法：

row | row-reverse | column | column-reverse
row 默認值，子元素會排列在一行從主軸左側開始
row-reverse 子元素會排列在一行。不過是從右側開始
column 子元素垂直顯示，從側軸起始點開始
column-reverse 垂直顯示，不過從結束點開始

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            border:1px solid #ccc;
            display:flex;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2.flex-wrap 控制容器內的子元素是被強制放在一行中或者是被放在多個行上。若是容許換行，這個屬性容許你控制行的堆疊方向。

語法：
nowrap | wrap | wrap-reverse
nowrap 全部的元素被擺在一行默認值
wrap 當一行元素過多，則容許元素換行
wrap-reverse 將側軸起點和終點顛倒

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .container {
        width: 600px;
        height: 500px;
        border:1px solid #ccc;
        display:flex;
        flex-wrap:wrap;
        flex-wrap:wrap-reverse;
    }
    .container div {
        width: 200px;
        height: 100px;
        background-color: orange;
    }
</style>
</head>
<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>
</body>
</html>

3.justify-content 屬性定義了瀏覽器如何分配順着父容器主軸的彈性（flex）元素之間及其周圍的空間。

語法：
flex-start | flex-end | center | space-between | space-around
flex-start : 從行首開始排列。每行第一個彈性元素與行首對齊，同時全部後續的彈性元素與前一個對齊。默認
flex-end : 從行尾開始排列。每行最後一個彈性元素與行尾對齊，其餘元素將與後一個對齊
center : 伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最後一個元素到行尾的距離相同
space-between : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊。
space-around : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半。

實例代碼:

參考上面的實例2.

4.align-items 屬性以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊。

語法：
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 對齊到側軸起點
align-items: flex-end; 對齊到側軸終點
align-items: center; 在側軸上居中
align-items: baseline; 與基準線對齊
align-items: stretch; 拉伸元素以適應默認值

實例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    #item-container {
        display: flex;/*啓用flex佈局*/
        background-color: pink;
        justify-content:space-around;
        align-items:baseline;/*與基準線對齊*/
    }
    .square {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .circle {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
    }
    .container {
        width: 500px;
        height: 600px;
        border:1px solid #ccc;
        display:flex;
        align-items: stretch;
    }
    .container div {
        width: 100px;
        background-color:red;
        border:1px solid green;
    }
</style>
</head>
<body>
<div id="item-container">
    <div class="circle"></div>
    <div class="square"></div>
    <div class="circle"></div>
</div>
<!-- <div class="container">
    <div>1</div>
    <div>2</div>
</div> -->
</body>
</html>

5.align-content 多行對其方式，若是隻有一行，則失效。

語法：
flex-start | flex-end | center | space-between | space-around | stretch
flex-start : 與交叉軸的起點對其
flex-end : 與交叉軸的終點對其
center : 與交叉軸的中點對其
space-between : 與交叉軸兩端對其，軸線之間的間隔平均分佈
space-around: 全部行在容器中平均分佈，相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最後一行的距離是相鄰兩行間距的一半。
stretch ：拉伸全部行來填滿剩餘空間。剩餘空間平均的分配給每一行

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 900px;
            border:1px solid #ccc;
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
            align-content:flex-end;
            align-content:center;
            align-content:space-between;
            align-content:space-around;
            align-content:stretch; /*默認*/
        }
        .container div {
            width: 200px;
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

彈性元素屬性 -- 給子元素設置的屬性

order order屬性規定了彈性容器中的可伸縮項目在佈局時的順序。元素按照order屬性的值的增序進行佈局。擁有相同order屬性值的元素按照它們在源代碼中出現的順序進行佈局。

語法：
order: 出現的次序

align-self 定義flex子項單獨在側軸（縱軸）方向上的對齊方式

語法：
stretch|center|flex-start|flex-end|baseline

flex-grow 定義彈性盒子元素擴展比率
flex-shrink 定義彈性盒子元素的收縮比率
flex-basis 指定了flex item在主軸方向上的初始大小。若是不使用box-sizing來
改變盒模型的話，那麼這個屬性就決定了flex item的內容盒content-box）的寬或者高（取決於主軸的方向）的尺寸大小。

Tip:須要注意的是，在上面的最後的flex-grow、flex-shrink、flex-basis 三個屬性最好相互搭配使用。

實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: flex;
}

#main div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

#main div:nth-of-type(2) {
    flex-shrink: 3;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

ok，上面大概就是一些經常使用的彈性盒子模型flex-box經常使用的屬性，上面的實例不少只是給了代碼，沒有給效果圖，是由於但願正在學習彈性盒子模型的同志們最好把代碼實際的敲一下，而且親自嘗試不一樣的屬性值，來分析不一樣屬性帶來的不一樣的效果。彈性盒子模型難度不大，可是卻與傳統的佈局方案有很大的差異。

相關標籤/搜索

每日一句

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