【不同的CSS】一文掌握 Flex 佈局(長篇警告)

時間  2021-08-14
標籤 css html web 瀏覽器 markdown ide oop 佈局 post 性能 欄目 Flex 简体版
原文   原文鏈接

【不同的CSS】一文掌握 Grid 佈局(長篇警告)

若彼岸繁華落盡，誰陪我看落日流年css

[toc]html

寫在前面

對 CSS 佈局掌握程度決定你在 Web 開發中的開發頁面速度。隨着 Web 技術的不斷革新，實現各類佈局的方式已經多得數不勝數了。web

最近利用碎片時間，大概用了半個月的時間整理了一個系列，本系列文章總結了 CSS 中的各類佈局，以及實現方式及其經常使用技巧。讓你經過該系列文章對 CSS 佈局有一個新的認識。瀏覽器

該系列的導航帖點我進入，裏面能夠快速跳轉到你想了解的文章(建議收藏)markdown

文章概述

因爲篇幅較長(請謹慎閱讀)，下圖涵蓋了本篇文章的主要知識點ide

正文開始oop

彈性盒子模型是什麼

CSS3新增了彈性盒子模型( Flexible Box或FlexBox)，是一種新的用於在HTML頁面實現佈局的方式。使得當HTML頁面適應不一樣尺寸的屏幕和不一樣的設備時，元素是可預測地運行。佈局

彈性盒子模型實現HTML頁面佈局是與方向無關的。不相似於塊級佈局側重垂直方向，內聯佈局側重水平方向。post

彈性盒子模型主要適用於HTML頁面的組件以及小規模的佈局，而並不適用於大規模的佈局，不然會影響 HTML 頁面性能。性能

彈性盒子模型相關概念

CSS3新增的彈性盒子模型是一個完整的模塊，涉及的樣式屬性較多。首先，對彈性盒子模型的相關概念完成基本的瞭解。

彈性盒子模型圖解.png (1233×432) (wangshmily.top)

  • 伸縮容器(flex container) :包裹伸縮項目的父元素。
  • 伸縮項目(flex item) :伸縮容器的每一個子元素。
  • 軸(axis) :每一個彈性盒子模型擁有兩個軸。
    • 主軸(main axis) :伸縮項目沿其一次排列的軸被稱爲主軸。
    • 側軸(cross axis) :垂直於主軸的軸被稱爲側軸。
    • 方向(direction) :伸縮容器的主軸由主軸起點和主軸終點，側軸由側軸起點和側軸終點描述伸縮項目排列的方向。
  • 尺寸(dimension) :根據伸縮容器的主軸和側軸，伸縮項目的寬度和高度。
    • 對應主軸的稱爲主軸尺寸。
    • 對應側軸的稱爲側軸尺寸。

定義彈性盒子模型

CSS3中想要設置爲彈性盒子模型的話，須要經過 display 樣式屬性設置值爲 flex 或 inline-flex 便可。

display: fiex; /* 值 flex 使彈性容器成爲塊級元素。 */
/* 或者 */
display: inline-fiex; /* 值 inline-flex 使彈性容器成爲單個不可分的行內級元素。 */
複製代碼

以上代碼就能夠指定某個元素爲彈性盒子模型，該元素成爲伸縮容器，子元素則成爲伸縮項目。

彈性盒子模型也存在瀏覽器兼容問題，解決方案以下：

/* WebKit引擎的瀏覽器(Chrome, Safari, Opera) */
display: -webkit-fiex;
/* Trident引擎的瀏覽器(IE 10+) */
dispaly: -ms-fiex;
/* Gecko引擎的瀏覽器(Firefox) */
display: -moz-fiex;
/* Presto引擎的瀏覽器(Opera) */
dispaly: -o-fiex;
複製代碼

示例代碼以下：定義一個簡單的 Flex Box

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>定義彈性盒子模型</title>
        <link rel="stylesheet" href="./init.css" />
        <style> /* 將父級元素設置爲彈性盒子模型 * 這樣設置的話子級全部元素都爲彈性盒子模型 * 默認狀況下，全部子元素做爲伸縮項目都是沿着主軸水平排列 */ .container { display: flex; } </style>
    </head>

    <body>
        <!-- HTML 結構爲父子級結構 -->
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

複製代碼

這裏並無開啓浮動之類的關於佈局的樣式，僅僅將 .container 的 display 設置爲 flex

執行結果以下所示；

image-20210509222425319

默認狀況下，全部子元素做爲伸縮項目都是沿着主軸水平排列

伸縮容器的屬性

flex-direction 屬性

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

語法結構

flex-direction: row | row-reverse | column | column-reverse;
複製代碼

值

  • row： 默認值，flex 容器的主軸被定義爲與文本方向相同。 主軸起點和主軸終點與內容方向相同(起點在左端)。

  • row-reverse： 表現和 row 相同，可是置換了主軸起點和主軸終點(起點在右端)

  • column： flex 容器的主軸和塊軸相同。主軸起點與主軸終點和書寫模式的先後點相同(起點在上沿)

  • column-reverse： 表現和 column 相同，可是置換了主軸起點和主軸終點明(起點在下沿)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>02 flex-direction屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; } .container { display: flex; margin: 20px; } /* flex-direction 屬性 * 做用：建立主軸方向 * 適用於伸縮容器元素 * 值 * row: 設置主軸是水平方向 默認 * row-reverse: 與 row 的方向相反 * column：設置主軸的方向是垂直方向 * column-reverse: 與column 方向相反 */ .row { /* 默認，水平排列 */ flex-direction: row; height: 200px; } .row-reverse { /* 水平排列，反向 */ flex-direction: row-reverse; height: 200px; } .column { /* 垂直排列 */ flex-direction: column; } .column-reverse { /* 垂直排列 反向 */ flex-direction: column-reverse; } </style>
    </head>
    <body>
        <div class="container row">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container row-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container column">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container column-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210509224157740

justify-content 屬性

CSS justify-content 屬性適用於伸縮容器元素，用於設置伸縮項目沿着主軸線的對齊方式。

語法結構

justify-content: center| flex-start| flex-end| space-between| space-around;
複製代碼

值

  • center: 伸縮項目向第一行的中間位置對齊(居中)。
  • flex-start: 伸縮項目向第一行的開始位置對齊(左對齊)。
  • flex-end: 伸縮項目向第一行的結束位置對齊(右對齊)。
  • space-between: 伸縮項目會平均分佈在一行中(兩端對齊，項目之間的間隔都相等)。
  • space-around: 伸縮項目會平均分佈在一行中(兩端對齊，項目兩側的間隔相等)。

示例代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>justify-content 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { display: flex; width: 1080px; margin: 100px auto 0; } .item { height: 100px; width: 240px; line-height: 100px; } /* justify-content屬性 * 做用：設置伸縮項目沿着主軸線的對齊方式 * 值 - center: 伸縮項目向第一行的中間位置對齊(居中)。 - flex-start: 伸縮項目向第一行的開始位置對齊(左對齊)。 - flex-end: 伸縮項目向第一行的結束位置對齊(右對齊)。 - space-between: 伸縮項目會平均分佈在一行中(兩端對齊，項目之間的間隔都相等)。 - space-around: 伸縮項目會平均分佈在一行中(兩端對齊，項目兩側的間隔相等)。 */ .center { justify-content: center; /* 居中 */ } .start { justify-content: flex-start; /* 左對齊 */ } .end { justify-content: flex-end; /* 右對齊 */ } .between { justify-content: space-between; /* 兩端對齊，項目之間的間隔都相等 */ } .around { justify-content: space-around; /* 兩端對齊，項目兩側的間隔相等 */ } </style>
    </head>
    <body>
        <div class="container center">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container start">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container end">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container between">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container around">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510212327810

值得注意的是 實現的是伸縮項目相對於伸縮容器的對齊方式，與頁面無關

align-items 屬性

CSS align-items 屬性適用於伸縮容器元素，用於設置伸縮項目所在行沿着側軸線的對齊方式。

語法結構

align-items: center | flex-start| flex-end| baseline| stretch;
複製代碼

值

  • center: 伸縮項目向側軸的中間位置對齊。
  • flex-start: 伸縮項目向側軸的起點位置對齊。
  • flex-end: 伸縮項目向側軸的終點位置對齊。
  • baseline: 伸縮項目根據伸縮項目的基線對齊。
  • stretch: 默認值，伸縮項目拉伸填充整個伸縮容器。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>align-items 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; } .container { display: flex; width: 600px; height: 500px; } /* align-items屬性 * 做用：設置伸縮項目所在行沿着側軸線的對齊方式 * 值 - center: 伸縮項目向側軸的中間位置對齊。 - flex-start: 伸縮項目向側軸的起點位置對齊。 - flex-end: 伸縮項目向側軸的終點位置對齊。 - baseline: 伸縮項目根據伸縮項目的基線對齊。 - stretch: 默認值，伸縮項目拉伸填充整個伸縮容器。 */ .center { align-items: center; /* 居中 */ } .start { align-items: flex-start; /* 頂對齊 */ } .end { align-items: flex-end; /* 底對齊 */ } </style>
    </head>
    <body>
        <div class="container center">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container start">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container end">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510215244308

配合 justify-content 屬性，能夠作出水平垂直居中

flex-wrap 屬性

CSS flex-wrap 屬性適用於伸縮容器元素，用於設置伸縮容器的子元素是單行顯示仍是多行顯示。

語法結構

flex-wrap: nowrap| wrap| wrap-reverse
複製代碼

值

  • nowrap: 設置伸縮項目單行顯示。這種方式可能致使溢出伸縮容器
  • wrap: 設置伸縮項目多行顯示，第一行在上方。
  • wrap-reverse: 與 wrap 相反，第一行在下方。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex-wrap 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; } .container { display: flex; width: 600px; height: 400px; } .item { width: 200px; } /* flex-wrap屬性 * 做用：設置伸縮容器的子元素是單行顯示仍是多行顯示。 * 值 - nowrap: 設置伸縮項目單行顯示。這種方式可能致使溢出伸縮容器 - wrap: 設置伸縮項目多行顯示，第一行在上方。 - wrap-reverse: 與 `wrap` 相反，第一行在下方。 */ .nowrap { flex-wrap: nowrap; } .wrap { flex-wrap: wrap; } .wrap-reverse { flex-wrap: wrap-reverse; } </style>
    </head>
    <body>
        <div class="container nowrap">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container wrap">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container wrap-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510220603220

若是設置伸縮容器的寬度小於全部子元素寬度之和的話，子元素並無自動換行也沒有溢出。

效果根據伸縮容器的寬度自動調整全部子元素的寬度

align-content 屬性

CSS align-content 屬性適用於伸縮容器元素，用於設置伸縮行的對齊方式。該屬性會更改 flex-wrap 屬性的效果。

該屬性對單行彈性盒子模型無效。

語法結構

align-content: center| flex-start| flex-end| space-between| space-around| stretch;
複製代碼

值

  • center: 各行向伸縮容器的中間位置對齊。
  • flex-start: 各行向伸縮容器的起點位置對齊。
  • flex-end: 各行向伸縮容器的終點位置對齊。
  • space-between: 各行會平均分佈在一行中。
  • space-around: 各行會平均分佈在一行中， 兩端保留一半的空間。
  • stretch: 默認值，各行將會伸展以佔用額外的空間。

示例代碼以下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>align-content 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 600px; height: 500px; flex-wrap: wrap; } .item { width: 200px; } /* align-content屬性 * 做用：設置設置伸縮行的對齊方式 * 值 - center: 各行向伸縮容器的中間位置對齊(居中)。 - flex-start: 各行向伸縮容器的起點位置對齊(頂對齊)。 - flex-end: 各行向伸縮容器的終點位置對齊(底對齊)。 - space-between: 各行會平均分佈在一行中(兩端對齊，項目之間的間隔都相等)。 - space-around: 各行會平均分佈在一行中， 兩端保留-半的空間(兩端對齊，項目兩側的間隔相等)。 - stretch: 默認值，各行將會伸展以佔用額外的空間。 * 注意：該屬性對單行無效，即：帶有 flex-wrap: nowrap */ .center { align-content: center; /* 居中 */ } .start { align-content: flex-start; /* 頂對齊 */ } .end { align-content: flex-end; /* 底對齊 */ } .between { align-content: space-between; /* 兩端對齊，項目之間的間隔都相等 */ } .around { align-content: space-around; /* 兩端對齊，項目兩側的間隔相等 */ } </style>
    </head>
    <body>
        <div class="container center">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container start">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container end">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container between">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
        <div class="container around">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510221903192

值得注意的是該屬性對單行彈性盒子模型無效，即：帶有 flex-wrap: nowrap

flex-flow 屬性

CSS flex-flow 屬性適用於伸縮容器元素，該屬性是 flex-direction 和 flex-wrap 的簡寫屬性，默認值爲 row nowrap。

語法結構

flex-flow: <'flex-direction'> || <'flex-wrap'>
複製代碼

伸縮項的屬性

order 屬性

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

語法結構

.item {
  order: <integer>
}
複製代碼

屬性值

  • <integer>: 表示此可伸縮項目所在的次序組, 默認爲0。

注意: order 僅僅對元素的視覺順序產生做用，並不會影響元素的邏輯順序。

示例代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>order 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 800px; height: 300px; align-items: center; } .item { width: 200px;} /* order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。 */ .item1 { order: 2; } .item4 { order: -1;} </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510222609720

使用這個屬性能夠很是簡單的改變其佈局

flex-grow 屬性

flex-grow 屬性規定在相同的容器中，項目相對於其他彈性項目的增加量，值默認爲0

語法結構以下：

.item {
  flex-grow: <number>; 
}
複製代碼

示例代碼以下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex-grow 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 800px; height: 300px; align-items: center; } .item { width: 200px; } /* flex-grow 屬性規定在相同的容器中，項目相對於其他彈性項目的增加量，值默認爲0 */ .item2 { flex-grow: 2; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item1 item">1</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510224913321

若是全部伸縮項目的 flex-grow 的值都爲1，則它們將等分剩餘空間

若是某個伸縮項目的 flex-grow 的值爲2，其餘爲1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-shrink 屬性

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

語法結構以下：

.item {
  flex-shrink: <number>; 
}
複製代碼

示例代碼以下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex-shrink 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 500px; height: 300px; align-items: center; } .item { width: 200px; } /* flex-shrink 屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。 */ .item2 { flex-shrink: 2; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item1 item">1</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510225126600

若是全部伸縮項目的 flex-shrink 的值都爲1，當空間不足時，都將等比例縮小

若是某個伸縮項目的 flex-shrink 的值爲0，其餘爲1，則空間不足時，前者不縮小。

flex-basis 屬性

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

語法結構以下：

.item {
  flex-basis: <length> | auto; 
}
複製代碼

它能夠設爲跟 width 或 height 屬性同樣的值，例如設置 230px，則項目將佔據固定空間。

flex 屬性

CSS flex 屬性是 flex-grow 、flex-shrink 、flex-basis 的簡寫屬性，用於設置伸縮項目如何伸長或縮短以適應伸縮容器中的可用空間。

語法結構

flex: auto | initial | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
複製代碼
  • none: 元素會根據自身寬高來設置尺寸。它是徹底非彈性的：既不會縮短，也不會伸長來適應 flex 容器。至關於將屬性設置爲"flex: 0 0 auto"。
  • auto: 元素會根據自身的寬度與高度來肯定尺寸，可是會伸長並吸取 flex 容器中額外的自由空間，也會縮短自身來適應 flex 容器。這至關於將屬性設置爲 "flex: 1 1 auto".

flex 屬性能夠指定1個、2個或3個值。

單值語法: 值必須爲如下其中之一:

  • 一個無單位數(<number>): 它會被看成 <flex-grow> 的值。
  • 一個有效的寬度(width)值: 它會被看成 <flex-basis>的值。
  • 關鍵字none，auto或initial.

雙值語法: 第一個值必須爲一個無單位數，而且它會被看成 <flex-grow> 的值。第二個值必須爲如下之一：

  • 一個無單位數：它會被看成 <flex-shrink> 的值。
  • 一個有效的寬度值: 它會被看成 <flex-basis> 的值。

三值語法:

  • 第一個值必須爲一個無單位數，而且它會被看成 <flex-grow> 的值。
  • 第二個值必須爲一個無單位數，而且它會被看成 <flex-shrink> 的值。
  • 第三個值必須爲一個有效的寬度值， 而且它會被看成 <flex-basis> 的值。

align-self 屬性

CSS align-self 屬性適用於伸縮容器元素,於設置伸縮項目自身元素在側軸的對齊方式。該屬性可覆蓋 align-items 屬性。默認值爲 auto，表示繼承父元素的 align-items 屬性

語法結構

align-self: center| flex-start| flex-end| baseline| stretch;
複製代碼
  • center: 伸縮項目向側軸的中間位置對齊。
  • flex-start: 伸縮項目向側軸的起點位置對齊。
  • flex-end: 伸縮項目向側軸的終點位置對齊。
  • baseline: 伸縮項目根據伸縮項目的基線對齊。
  • stretch: 默認值，伸縮項目拉伸填充整個伸縮容器。

示例代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>align-self 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 600px; height: 400px; align-items: center; } .item { width: 200px; } /* align-self 屬性 設置單個元素的對齊方式 */ .start { align-self: flex-start; } .center { align-self: center; } .end { align-self: flex-end; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item start">1</div>
            <div class="item2 item center">2</div>
            <div class="item3 item end">3</div>
        </div>
    </body>
</html>

複製代碼

執行效果以下

image-20210510225917158

(完)

PS: 關於 Flex 佈局有一個小遊戲能夠幫助咱們練習 Flexbox Froggy - 一個用來學CSS flexbox的遊戲

用到的 CSS 樣式

body {
    margin: 0;
    padding: 20px;
}
.container {
    background-color: #fffae8;
    margin: 30px auto;
}
.item {
    height: 200px;
    width: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 80px;
}
.item1 {
    background-color: #e6005c;
}
.item2 {
    background-color: #777bce;
}
.item3 {
    background-color: #c9780c;
}
.item4 {
    background-color: #fef3c9;
}
.item5 {
    background-color: #ce3b3b;
}
.item6 {
    background-color: #e666ff;
}
.item7 {
    background-color: #f4ea20;
}
.item8 {
    background-color: #b4a4ca;
}

複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程