Flex彈性佈局學習整理

隨着移動互聯網的發展，對於網頁佈局來說要求越來越高，而傳統的佈局方案對於實現特殊佈局非常不方便，比如垂直居中。
2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地使用這項功能。

作用在flex容器上	作用在flex子項上
flex-direction	order
flex-wrap	flex-grow
justify-content	flex-basis
align-items	flex
align-content	align-self

flex-direction

用來控制子項整體佈局方向，是從左往右還是從上往下。

取值	含義
row	默認值，顯示爲行。方向爲當前文檔水平流方向，默認情況是從左往右
row-reverse	顯示爲行。但方向和row屬性值是反的
column	顯示爲列
column-reverse	顯示爲列。但方向和column屬性值是反的

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            /* 顯示爲行，方向和row屬性值相反 */
            /* flex-direction: row-reverse; */

            /* 顯示爲列 */
            /* flex-direction: column; */
            /* 反向 */
            flex-direction: column-reverse;

            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;

        }

        .box div {
            width: 50px;
            height: 50px;
            color: white;
            background-color: red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

flex-warp

flex-warp用來控制子項整體單行顯示還是換行顯示

取值	含義
nowrap	默認值，表示單行顯示，不換行
wrap	寬度不足換行顯示
wrap-reverse	寬度不足換行顯示，但是還是從上往下開始，也就是原本換行在下面的子項現在跑到上面

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>單行還是換行顯示</title>
    <style>
        .box {
            display: flex;
            /* 寬度不足時換行*/
            /* flex-wrap: wrap; */
            /* 默認情況 不會立即溢出，直到內容放不下才溢出 */
            /* flex-wrap: nowrap; */

            /* 反向 */
            flex-wrap: wrap-reverse;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;

        }

        .box div {
            width: 50px;
            height: 50px;
            color: white;
            background-color: red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <!-- 根據內容的大小選擇自適應，內容過多會溢出 -->
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>

    </div>
</body>

</html>

flex-flow

flex-flow屬性是flex-direction和flex-wrap的縮寫，表示flex佈局的flow流動特性。第一個值表示方向，第二個值表示換行，中間用空格隔開。

justify-content

取值	含義
flex-start	默認值，表現爲起始位置對齊
flex-end	表現爲結束位置對齊
center	表現爲居中對齊
space-between	表現爲兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配
space-around	around是環饒的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度的一半
space-evenly	evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>對齊和分佈方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            /* 起始位置對齊 */
            /* justify-content: start; */
            /* 結束位置對齊 */
            /* justify-content: flex-end; */
            /* 居中對齊 */
            /* justify-content: center; */
            /* 兩端對齊 */
            /* justify-content: space-between; */
            /* 環繞 */
            /* justify-content: space-around; */
            /* 勻稱 */
            justify-content: space-evenly;

            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
        }

        .box div {
            width: 50px;
            height: 50px;
            background-color: red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

align-items

align-items中的items指的就是flex子項們，因此align-items指的就是flex子項們相對於flex容器在側軸方向上的對齊方式

取值	含義
stretch	默認值，flex子項拉伸（相對於去掉子項的高,會充滿整個容器）
flex-start	表現爲容器頂部對齊
flex-end	表現爲容器底部對齊
center	表現爲垂直居中對齊

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

align-content

align-content可以看成和justify-content是相似且對立的屬性，如果所有的flex子項只有一行，則align-content屬性沒有任何效果。

取值	含義
stretch	默認值。每行flex子元素都等比拉伸。例如，共有兩行flex子元素，則每行拉伸的高度是50%。
flex-start	表現爲起始位置對齊
flex-end	表現爲結束位置對齊
center	表現爲居中對齊
space-between	表現爲兩端對齊
space-around	每一行元素上下都享有獨立不重疊的空白空間
space-evenly	每一行元素都完全上下等分

align-content:stretch;

align-content:flex-start;

align-content:flex-end;
align-content:center;

align-content:space-between;
align-content:space-around;
align-content:space-evenly;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行對齊方式</title>
    <style>
        .box {
            display: flex;
            /* 均勻排列 */
            /* justify-content: space-evenly; */
            /* 換行 */
            flex-wrap: wrap;

            /* 容器頂部對齊 */
            /* align-items: flex-start; */
            /* 拉伸 */
            /* align-content: stretch; */
            /* 起始位置對齊 */
            /* align-content: flex-start; */
            /* 結束位置對齊 */
            /* align-content: flex-end; */
            /* 居中對齊 */
            /* align-content: center; */
            /* 兩端對齊 */
            /* align-content: space-between; */
            /* 環繞 */
            /* align-content: space-around; */
            /* 勻稱 */
            align-content: space-evenly;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
        }

        .box div {
            width: 50px;
            border: 1px solid blue;
            background-color: red;
            text-align: center;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>測試文本</div>
        <div>測試文本測試文本</div>
        <div>測試文本</div>
        <div>測試文本測試文本測試</div>
        <div>測試文本</div>
        <div>測試文本測試文本</div>
        <div>測試文本</div>
        <div>測試文本測試文本測試</div>
    </div>
</body>

</html>

ps:

justify-content相對於xz軸方向的排版，align-content相對於y軸的排版。

作用在flex子項的CSS屬性

取值	含義
order	可以通過設置order改變某一個flex子項的排序位置。所有的flex子項的默認order屬性值是0。
flex-grow	屬性中的grow是拓展的意思，拓展的就是flex子項所佔的寬度,拓展所侵佔的空間就是出去元素外的剩餘的空白間隙。默認值爲0。
flex-shrink	屬性中的shrink是收縮的意思，flex-shrink主要處理當flex容器空間不足時，單個元素收縮比例。默認值是1。
flex-basis	flex-basis定義了在分配剩餘空間之前元素的默認大小
flex	flex屬性是flex-grow,flex-shrink和flex-basis的縮寫（優先級高）
align-self	align-self指控制單獨某一個flex子項的垂直對齊方式

order:1;
flex-grow:1;
flex-shrink:0;
flex-basis:100px;(在有剩餘空間的情況下設置)
flex

flex屬性是flex-grow，flex-shrink和flex-basis的縮寫。

align-self:center;(flex-start:容器頭部對齊 flex-end：容器底部對齊)

骰子點數案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子的點數</title>
    <style>
        .box1,
        .box2,
        .box3,
        .box4,
        .box5,
        .box6 {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 5px;
            margin-left: 30px;

        }

        .box1 div,
        .box2 div,
        .box3 div {
            width: 30%;
            height: 30%;
            background-color: black;
            border-radius: 50%;
        }

        .box1 {
            /* 彈性佈局 */
            display: flex;
            /* 主軸方向上子項的對齊和分佈方式 */
            justify-content: center;
        }

        .box2 {
            /* 彈性佈局 */
            display: flex;
            /* 兩端對齊 */
            justify-content: space-between;
        }

        .box2 div:nth-child(2) {
            /* 容器底部對齊 */
            align-self: flex-end;
        }

        .box3 {
            /* 彈性佈局 */
            display: flex;
            /* 兩端對齊 */
            justify-content: space-between;
        }

        .box3 div:nth-child(2) {
            /* 垂直居中對齊 */
            align-self: center;
        }

        .box3 div:nth-child(3) {
            /* 容器底部對齊 */
            align-self: flex-end;
        }

        .box4 {
            display: flex;
            /* 折行 */
            flex-wrap: wrap;
        }

        .box4 div {
            display: flex;
            /* 兩端對齊 */
            justify-content: space-between;
            width: 100%;

        }

        .box4 div:last-child {
            /* flex子項容器底部對齊 */
            align-items: flex-end;
        }

        .box4 div i {
            display: block;
            width: 30%;
            height: 60%;
            background-color: black;
            border-radius: 50%;
        }

        .box5 {
            display: flex;
            /* 折行 */
            flex-wrap: wrap;
        }

        .box5 div {
            display: flex;
            /* 垂直居中對齊 */
            justify-content: center;
            width: 100%;
            align-items: center;

        }

        .box5 div:first-child {
            /* flex子項容器頂部對齊 */
            align-items: flex-start;
            /* 使子項兩端對齊 */
            justify-content: space-between;
        }

        .box5 div:last-child {
            /* flex子項容器底部對齊 */
            align-items: flex-end;
            /* 使子項兩端對齊 */
            justify-content: space-between;
        }

        .box5 div i {
            display: block;
            width: 30%;
            height: 90%;
            background-color: black;
            border-radius: 50%;
        }

        .box6 {
            display: flex;
            /* 折行 */
            flex-wrap: wrap;
        }

        .box6 div {
            width: 100%;
            display: flex;
            /* 垂直居中對齊 */
            justify-content: space-between;
        }

        .box6 div:first-child {
            /* flex子項容器頂部對齊 */
            align-items: flex-start;

        }


        .box6 div:last-child {
            /* flex子項容器底部對齊 */
            align-items: flex-end;

        }

        .box6 div i {
            display: block;
            width: 30%;
            height: 90%;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>


</body>

</html>

兩列固定一列自適應案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自適應</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            display: flex;
        }

        .left {
            width: 200px;
            height: 200px;
            background-color: red;

        }

        .center {
            /* 適應剩餘的空間 */
            flex: 1;
            height: 300px;
            background-color: yellow;

        }

        .right {
            width: 150px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

Flex彈性佈局學習整理

flex-direction

flex-warp

justify-content

align-items

align-content

作用在flex子項的CSS屬性

骰子點數案例

兩列固定一列自適應案例

移動web開發學習整理

博學谷案例練習

小米首頁案例練習

蘇寧易購首頁局部案例練習

簡書首頁案例練習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結