CSS3中的彈性盒子模型

阿新 • • 發佈：2020-10-18

介紹

在css2當中，存在標準模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強大的、靈活的佈局方案。彈性盒子模型是css3中新提出的一種佈局方案。是一種為了應對針對不同螢幕寬度不同裝置的一整套新的佈局方案。主要是對一個容器中的子元素進行排列、對齊和分配空白空間的方案的調整。

新舊版本的彈性盒子模型
在之前，css3曾經推出過舊版本的彈性盒子模型。相對於新版本的彈性盒子模型而言，舊版本的內容與新版本還是有些出入。而且，從功能上來講，舊版本的彈性盒子模型遠遠沒有新版本的盒子模型強大，從相容性來講，二者在pc端ie9以下都存在著相容性問題，但是在移動端，舊版本的彈性盒子模型相容性則更好一點。但是對於我們來說，我們依然要將主要的精力放在新版本的彈性盒子模型的身上，因為舊版本的彈性盒子模型淘汰是必然，隨著手機端的相容性逐漸提升，舊版本必將被淘汰。另外，新版本具有更加強大的功能，也值得我們進行深度的學習。那麼我們對於新舊兩個版本的彈性盒子模型，我們只需要抱著對比的心態學習即可，掌握新版本，瞭解舊版本，這樣即使有一天我們需要使用舊版本，也可以非常容易的學習舊版本的彈性盒子模型。

相關概念

主軸

我們以元素排在一行為例，當元素排列在一行的時候，主軸既表示元素排列的方向，橫向排列則主軸即可以理解為一條橫線，又因為我們元素預設是從左向右排列，那麼我們可以說在預設的情況下，元素的主軸的起始位置是在左，而方向為右，終點也為右。

側軸

元素垂直的方向即為側軸。預設上為起點，下為終點。

彈性容器

我們想要使用彈性盒子模型，就需要將容器轉換為彈性容器，我們說一個包含於子元素的容器設定了display:flex，那麼這個容器也就變成了彈性容器。

彈性子元素

當子元素的父元素變成了彈性容器，那麼其中的所有的子元素也自然而然的變成了彈性子元素。

如何建立一個彈性容器：

display:flex | inline-flex

彈性容器屬性

flex-direction

彈性容器中子元素的排列方式(主軸排列方式)
屬性值：

row:預設在一行排列
row-reverse:反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。）
column：縱向排列。
column-reverse：反轉縱向排列，從下往上排，最後一項排在最上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction</title>
    <style>
        html,body {
            margin:0;
            padding:0;
        }
        nav {
            height: 500px;
            background-color: lightcyan;
            display: flex;
            flex-direction: row-reverse;/*居左1234 變成居右4321*/
            flex-direction: column;/*居左1234變成上下1234*/
            flex-direction: column-reverse;/*變成下上1234*/
        }
        nav div 
 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<nav>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
</nav>

</body>
</html>

flex-wrap

設定彈性盒子的子元素超出父容器時是否換行
屬性值：

nowrap: 預設值。規定元素不拆行或不拆列。
wrap:規定元素在必要的時候拆行或拆列。
wrap-reverse:規定元素在必要的時候拆行或拆列，但是以相反的順序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*設定了屬性為wrap，那麼一行放不下的時候會自動的去下一行*/
            /*flex-wrap:wrap;*/
            /*設定了屬性為wrap-reverse會讓排序發生一個反轉，雖然同樣是多行，但是會變成從下到上*/
            flex-wrap: wrap-reverse;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="box">
    <!--此時元素如果不換行，那麼當一行的整體放不下時，每個元素就會相應的縮小-->
    <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>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>
</body>
</html>

flex-flow

flex-direction 和 flex-wrap 的簡寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            flex-flow: row wrap;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="box">
    <!--此時元素如果不換行，那麼當一行的整體放不下時，每個元素就會相應的縮小-->
    <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>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>

</body>
</html>

align-item

設定彈性盒子元素在側軸（縱軸）方向上的對齊方式
相關屬性值：

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-item</title>
    <style>
        .box {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*預設 側軸起點橫向排列*/
            /*align-items: flex-start;*/
            /*側軸終點橫向排列*/
            /*align-items: flex-end;*/
            /*側軸終點橫向排列*/
            /*align-items: center;*/
            align-items: baseline;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            margin:10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

align-content

修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊(行與行的對其方式).
相關屬性：

flex-start：沒有行間距
flex-end：底對齊沒有行間距
center ：居中沒有行間距
space-between：兩端對齊，中間自動分配
space-around：自動分配距離

請注意本屬性在只有一行的伸縮容器上沒有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-content</title>
    <style>
        nav {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*開啟多行*/
            flex-wrap: wrap;
            /*側軸起點上下兩行對齊，沒有行間距*/
            /*align-content: flex-start;*/
            /*側軸終點上下兩行對齊，沒有行間距，第一行依然在上*/
            /*align-content: flex-end;*/
            /*側軸終點對齊，第一行依然在上，沒有行間距*/
            /*align-content:center;*/
            /*兩端對齊，中間自動分配*/
            /*align-content: space-between;*/
            /*自動分配距離*/
            align-content:space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin:10px;
        }
    </style>
</head>
<body>
    <nav>
        <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>11</div>
        <div>12</div>
        <div>13</div>
    </nav>
</body>
</html>

justify-content

設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
相關屬性：

flex-star：t預設，頂端對齊
flex-end：末端對齊
center：居中對齊
space-between：兩端對齊，中間自動分配
space-around：自動分配距離

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style>
        nav {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*justify-content: flex-start;*/
            /*主軸對齊，貼右 1234*/
            /*justify-content: flex-end;*/
            /*主軸對齊，居中*/
            /*justify-content: center;*/
            /*兩端對齊，中間自動分配*/
            /*justify-content: space-between;*/
            /*自動分配距離*/
            justify-content: space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin:10px;
        }
    </style>
</head>
<body>
<nav>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</nav>
</body>
</html>

彈性子元素屬性

order

設定彈性盒子的子元素排列順序。 number排序優先順序，數字越大越往後排，預設為0，支援負數。

flex-grow

設定或檢索彈性盒子元素的擴充套件比率。

flex-shrink

設定或檢索彈性盒子元素的收縮比率。

flex-basis

用於設定或檢索彈性盒伸縮基準值

flex

設定彈性盒子的子元素如何分配空間,是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性

align-self

在彈性子元素上使用。覆蓋容器的 align-items 屬性。值與容器屬性一樣，只是這個是單獨的設定某個元素。

CSS3中的彈性盒子模型

CSS3中的彈性盒子模型

JS Web Flex彈性盒子模型程式碼例項

彈性盒子模型之flex屬性總結

HTML中的盒子模型

CSS3彈性盒子

彈性盒模型中flex-grow 和flex的區別

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第5章CSS盒子模型

CSS3 彈性盒子(Flex Box)

14, css3彈性盒子, calc計算函式, css3預處理, less語法

解決css中flex彈性盒子與overflow一起使用時導致的樣式問題

CSS3彈性盒子常用屬性

CSS（20）CSS3 彈性盒子(Flex Box)

flex彈性盒子中flex-grow與flex的區別

企業應用架構模式中的層次模型簡介

Redis中事件驅動模型示例詳解

在Pytorch中計算自己模型的FLOPs方式

深入淺析Python 中的sklearn模型選擇

Django中自定義模型管理器(Manager)及方法

在C++中載入TorchScript模型的方法

C#開發BIMFACE系列39 網頁整合開發3：審圖系統中三維模型比對

CSS3中的彈性盒子模型

相關推薦