web前端入門到實戰：CSS3中的彈性盒子模型

時間 2020-01-17

標籤 web 前端入門實戰 css3 css 彈性盒子模型欄目 HTML 简体版

原文原文鏈接

介紹css

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

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

相關概念css3

主軸

咱們以元素排在一行爲例，當元素排列在一行的時候，主軸既表示元素排列的方向，橫向排列則主軸便可以理解爲一條橫線，又由於咱們元素默認是從左向右排列，那麼咱們能夠說在默認的狀況下，元素的主軸的起始位置是在左，而方向爲右，終點也爲右。ide

側軸

元素垂直的方向即爲側軸。默認上爲起點，下爲終點。工具

彈性容器

咱們想要使用彈性盒子模型，就須要將容器轉換爲彈性容器，咱們說一個包含於子元素的容器設置了display:flex，那麼這個容器也就變成了彈性容器。佈局

彈性子元素

當子元素的父元素變成了彈性容器，那麼其中的全部的子元素也天然而然的變成了彈性子元素。學習

如何建立一個彈性容器：flex

display:flex | inline-flex

彈性容器屬性spa

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>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

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：自動分配距離

<!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>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

彈性子元素屬性