科技阿宅王 - 資訊科技分享網站
[CSS Flex 布局排版教學] 網頁設計排版必學神器
  1. 首頁»
  2. 網頁設計»
  3. [CSS Flex 布局排版教學] 網頁設計排版必學神器»

[CSS Flex 布局排版教學] 網頁設計排版必學神器

Posted on by 科技阿宅

內容目錄

CSS Flex 為專為網頁設計排版使用的 CSS 語法，又稱為「CSS 彈性盒子（Flex Box 或 Flexible Box）」，透過 CSS Flex 能快速對網頁進行切版與排版，以取代 CSS float 區塊浮動語法排版網頁時的不方便。

相關延伸文章閱讀
[CSS Flex] div 水平及垂直置中語法

相關延伸文章閱讀
[CSS Flex] 透過 Flex（彈性盒子）達到左右分割效果

CSS Flex 語法支援的瀏覽器（Browser）版本有哪些？

CSS Flex 語法支援瀏覽器
瀏覽器圖示 瀏覽器名稱 版本編號
Google Chrome Google Chrome 29+
Microsoft Edge Microsoft Edge 11+
Firefox Firefox 22+
Safari Safari 10+
Opera Opera 48+

CSS Flex 的語法有那些？

以下是所有 CSS Flex 語法，下面會針對每個語法使用做更近一步的說明。

  • display:flex

  • flex-wrap

  • flex-direction

  • flex-flow

  • justify-content

  • align-items

  • align-content

  • align-self

  • order

  • flex (flex-grow、flex-shrink、flex-basis)

CSS Flex 布局排版語法使用宣告

第一步

以下範例使用說明，首先透過 HTML 及 CSS 畫出不同顏色的方形（如下方程式碼與呈現結果）。

CSS

.flex_container{/*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF;/*藍色外框線*/
}
.flex_container .yellow{/*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{/*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{/*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{/*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

HTML

            <div class="flex_container"><!--包袱容器-->
                <div class="yellow"></div><!--黃色-->
                <div class="deepskyblue"></div><!--深天藍-->
                <div class="blueviolet"></div><!--紫羅蘭色-->
                <div class="crimson"></div><!--赤紅-->
            </div>

顯示結果

預設網頁呈現會是「由左至右」及「由上至下」來排列網頁中所有元素（如下方結果所示）。

[CSS Flex 布局排版教學] 網頁設計排版必學神器
透過 HTML 及 CSS 畫出不同顏色的方形
第二步

在 CSS 中的「flex_container」（容器）加上「display: flex;」語法，在「flex_container」內的顏色方形元素會自動排列成一整行，代表容器已宣告成 Flex Box（彈性盒子）的排版（如下方程式碼與呈現結果）。

CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
容器已宣告成 Flex Box（彈性盒子）的排版

CSS Flex 布局排版語法 – flex-wrap 語法說明與使用

flex-wrap：換行設定，當宣告成 Flex Box 的容器內的「元素寬度」大於「容器的寬度」時，會造成容器內的元素被擠在同一行顯示，這時可透過換行設定將容器內寬度過寬的元素自動往下排列。


可用屬性

  • nowrap（不換行，為預設值）

  • wrap（換行）

  • wrap-reverse（換行，但會順序排列反轉）

以下 CSS 語法呈現：

flex-wrap: nowrap; /*不換行，為預設值*/

flex-wrap: wrap; /*換行*/

flex-wrap: wrap-reverse; /*換行，但會順序排列反轉*/

以下步驟化說明：

第一步

原本容器寬度為 800px（像素），容器內中的 4 個顏色方形元素寬度各別為 180px（像素），物件寬度總計 720px（像素）（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
容器寬度為 800px（像素）
第二步

將容器寬度修改為 600px（像素），因容器內的元素寬度大於容器寬度，使得元素寬度個別被擠壓為寬度 150px（像素）（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
容器寬度修改為 600px（像素）

flex-wrap: nowrap


而在「flex_container」容器中使用「flex-wrap: nowrap」CSS 語法設定為「不換行」，則會和上面一樣呈現不換行的結果（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: nowrap;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
因容器內的元素寬度大於容器寬度，使得元素寬度個別被擠壓為寬度 150px

flex-wrap: wrap


這時在「flex_container」容器中加入「flex-wrap: wrap」CSS 語法，當容器中的元素寬度過寬時，元素會自動往下排列，而不會所有元素全部擠在同一行（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「flex-wrap: wrap」語法，容器內的元素會自動往下排列

flex-wrap: wrap-reverse


當在「flex_container」容器中使用「flex-wrap: wrap-reverse」CSS 語法，則容器內的元素會自動往下排列，並且順序排列反轉（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap-reverse;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「flex-wrap: wrap-reverse」語法，容器內的元素會自動往下排列，並且順序排列反轉

CSS Flex 布局排版語法 – flex-direction 語法說明與使用

flex-direction：能設定容器內的元素排列方向。


Flex Box 在排版時，可分為「row（主軸）」及「column（縱軸）」方向排列（如下圖所示）。

[CSS Flex 布局排版教學] 網頁設計排版必學神器
容器內的物件排列方向

可用屬性

  • row（預設值，將容器內的元素由左至右排列）

  • row-reverse（將容器內的元素由左至右排列，並進行反轉）

  • column（將容器內的元素上到下排列，再由左至右排列）

  • column-reverse（將容器內的元素上到下排列，再由左至右排列，並將元素進行反轉）

以下 CSS 語法呈現：

flex-direction: row; /*預設值，將容器內的物件由左至右排列*/

flex-direction: row-reverse; /*將容器內的物件由左至右排列，並進行反轉*/

flex-direction: column; /*將容器內的物件上到下排列，再由左至右排列*/

flex-direction: column-reverse; /*將容器內的物件上到下排列，再由左至右排列，並將物件進行反轉*/

flex-direction: row


在「flex_container」容器中使用「flex-direction: row」CSS 語法，能使容器內的元素由左至右排列，為 Flex Box 預設排列方式（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-direction: row;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「flex-direction: row」語法將容器內的元素由左至右排列

flex-direction: row-reverse


在「flex_container」容器中使用「flex-direction: row-reverse」CSS 語法，能使容器內的元素由左至右排列，並進行反轉排列（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-direction: row-reverse;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「flex-direction: row-reverse」語法將容器內的元素由左至右排列，並反轉排列

flex-direction: column


在「flex_container」容器中使用「flex-direction: column」CSS 語法，能使容器內的元素由上至下排列，再由左至右排列（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 600px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    flex-direction: column;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「flex-direction: column」CSS 語法，讓容器內的元素由上至下排列，再由左至右排列

flex-direction: column-reverse


在「flex_container」容器中使用「flex-direction: column-reverse」CSS 語法，能使容器內的元素由上至下排列，再由左至右排列，並進行反轉排列（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 600px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「flex-direction: column-reverse」CSS 語法，讓容器內的元素由上至下排列，再由左至右排列，並反轉排列

CSS Flex 布局排版語法 – flex-flow 語法說明與使用

flex-flow：為「flex-direction」及「flex-wrap」屬性使用縮寫。


flex-flow 語法格式

flex-flow: （flex-direction 屬性） （flex-wrap 屬性）


使用範例：

.flex_container{
    flex-direction: column;
    flex-wrap: wrap;
}

使用 flex-flow 寫法：

.flex_container{
    flex-flow: column wrap;
}

CSS Flex 布局排版語法 – justify-content 語法說明與使用

justify-content：用來控制容器內元素的「水平對齊」位置，以「主軸（橫軸）」的「起點」到「終點」做為依據。


[CSS Flex 布局排版教學] 網頁設計排版必學神器
以「主軸（橫軸）」的「起點」到「終點」做為依據

可用屬性

  • flex-start（預設值，將容器內的元素從主軸（橫軸）的「起點」開始排列）

  • flex-end（將容器內的元素從主軸（橫軸）的「終點」開始排列）

  • center（將容器內的元素排列在主軸（橫軸）的「起點」與「終點」之間置中排列）

  • space-between（將容器內的元素平均間距排列，且最兩側元素會貼緊「起點」與「終點」）

  • space-around（將容器內的元素平均間距排列，且最兩側元素會與「起點」及「終點」之間保持較小距離）

  • space-evenly（使容器內的元素平均間距，並且與最靠近「起點」及「終點」兩側元素之間間距相同）

以下 CSS 語法呈現：

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

justify-content: flex-start


在「flex_container」容器中使用「justify-content: flex-start」CSS 語法，將容器內的元素從主軸（橫軸）的「起點」開始排列，為 Flex Box 預設排列方式（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 600px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    justify-content: flex-start;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「justify-content: flex-start」語法，將容器內的元素從主軸（橫軸）的「起點」開始排列

justify-content: flex-end


在「flex_container」容器中使用「justify-content: flex-end」CSS 語法，將容器內的元素從主軸（橫軸）的「終點」開始排列（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    justify-content: flex-end;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「justify-content: flex-end」語法，將容器內的元素從主軸（橫軸）的「終點」開始排列

justify-content: center


在「flex_container」容器中使用「justify-content: center」CSS 語法，將容器內的元素排列在主軸（橫軸）的「起點」與「終點」之間置中排列（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    justify-content: center;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「justify-content: center」語法，將容器內的元素排列在主軸（橫軸）的「起點」與「終點」之間置中排列

justify-content: space-between


在「flex_container」容器中使用「justify-content: space-between」CSS 語法，將容器內的元素平均間距排列，且最兩側元素會貼緊「起點」與「終點」（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    justify-content: space-between;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「justify-content: space-between」語法，將容器內的元素平均排列，且最兩側物件會貼緊「起點」與「終點」

justify-content: space-around


在「flex_container」容器中使用「justify-content: space-around」CSS 語法，將容器內的元素平均間距排列，且最兩側元素會與「起點」及「終點」之間保持較小距離（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    justify-content: space-around;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「justify-content: space-around」語法，將容器內的元素平均間距排列，且最兩側物件會與「起點」及「終點」之間保持較小距離

justify-content: space-evenly


在「flex_container」容器中使用「justify-content: space-evenly」CSS 語法，使容器內的元素平均間距，並且與最靠近「起點」及「終點」兩側元素之間間距相同（如下方結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    justify-content: space-evenly;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「justify-content: space-evenly」語法，使容器內的元素平均間距，並且與最靠近「起點」及「終點」兩側物件之間間距相同

CSS Flex 布局排版語法 – align-items 語法說明與使用

align-items：用來控制容器內元素的「垂直對齊」位置，以「縱軸」的「起點」到「終點」做為依據。


[CSS Flex 布局排版教學] 網頁設計排版必學神器
以「縱軸」的「起點」到「終點」做為依據

可用屬性

  • stretch（預設值，將容器內的元素往縱軸的「起點」延伸到「終點」，但容器內的元素不能設定高度（height）才會生效）

  • flex-start（將容器內的元素從縱軸的「起點」開始排列）

  • flex-end（將容器內的元素從縱軸的「終點」開始排列）

  • center（將容器內的元素排列在縱軸的「起點」與「終點」之間置中排列）

  • baseline（使容器內元素中的文字底部會切齊排列）

以下 CSS 語法呈現：

align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch


在「flex_container」容器中使用「align-items: stretch」CSS 語法，將容器內的元素往縱軸的「起點」延伸到「終點」，但容器內的元素不能設定高度（height）才會生效（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    align-items: stretch;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-items: stretch」語法，容器內的元素往縱軸的「起點」到「終點」延伸填滿

align-items: flex-start


在「flex_container」容器中使用「align-items: flex-start」CSS 語法，將容器內的元素從縱軸的「起點」開始排列（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    align-items: flex-start;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-items: flex-start」語法，將容器內的元素從縱軸的「起點」開始排列

align-items: flex-end


在「flex_container」容器中使用「align-items: flex-end」CSS 語法，將容器內的元素從縱軸的「終點」開始排列（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    align-items: flex-end;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-items: flex-end」語法，將容器內的元素從縱軸的「終點」開始排列

align-items: center


在「flex_container」容器中使用「align-items: center」CSS 語法，將容器內的元素排列在縱軸的「起點」與「終點」之間置中排列（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    align-items: center;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-items: center」語法，將容器內的元素排列在縱軸的「起點」與「終點」之間置中排列

align-items: baseline


在「flex_container」容器中使用「align-items: baseline」CSS 語法，使容器內元素中的文字底部會切齊排列（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    align-items: baseline;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 60px;
    background-color: deepskyblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 60px;
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML

            <div class="flex_container"><!--包袱容器-->
                <div class="yellow">yellow</div><!--黃色-->
                <div class="deepskyblue">deepskyblue</div><!--深天藍-->
                <div class="blueviolet">blueviolet</div><!--紫羅蘭色-->
                <div class="crimson">crimson</div><!--赤紅-->
            </div>

顯示結果

下圖可看到，當使用「align-items: baseline」語法時，容器內元素中的文字底部會切齊排列（如下圖中的文字切齊橘色線條）。

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-items: baseline」語法時，容器內元素中的文字底部會切齊排列

CSS Flex 布局排版語法 – align-content 語法說明與使用

align-content：用來設定容器內元素在各行「水平方向」的對齊位置，容器須設定「flex-wrap:wrap」換行語法，使容器內元素呈現多行排列才能觸發設定。


可用屬性

  • stretch（預設值，容器內元素中的每一行會自動延伸填滿行距，但容器內的元素不能設定高度（height）才會生效）

  • flex-start（容器內元素每行貼緊縱軸的「起點」）

  • flex-end（容器內元素每行貼緊縱軸的「終點」）

  • center（容器內元素每行對齊縱軸的「起點」與「終點」之間置中位置）

  • space-between（容器內元素第一行與最後一行分別貼緊縱軸「起點」與「終點」）

  • space-around（容器內元素每行平均分配，並每行間距排列，且第一行與最後一行元素會與縱軸「起點」及「終點」之間保持最小距離）

  • space-evenly（容器內元素每行平均分配，並每行間距排列，且第一行與最後一行元素會與縱軸「起點」及「終點」之間保持相同距離）

以下 CSS 語法呈現：

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;

align-content: stretch


在「flex_container」容器中使用「align-content: stretch」CSS 語法，容器內元素中的每一行會自動延伸填滿行距，但容器內的元素不能設定高度（height）才會生效（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    align-content: stretch;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-content: stretch」語法，容器內元素中的每一行會自動延伸填滿行距

align-content: flex-start


在「flex_container」容器中使用「align-content: flex-start」CSS 語法，容器內元素每行貼齊縱軸的「起點」（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    align-content: flex-start;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-content: flex-start」語法，容器內元素每行貼齊縱軸的「起點」

align-content: flex-end


在「flex_container」容器中使用「align-content: flex-end」CSS 語法，容器內元素每行貼緊縱軸的「終點」（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-content: flex-end」語法，容器內元素每行貼緊縱軸的「終點」

align-content: center


在「flex_container」容器中使用「align-content: center」CSS 語法，容器內元素每行對齊縱軸的「起點」與「終點」之間置中位置（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    align-content: center;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-content: center」語法，容器內元素每行對齊縱軸的「起點」與「終點」之間置中位置

align-content: space-between


在「flex_container」容器中使用「align-content: space-between」CSS 語法，容器內元素第一行與最後一行分別貼緊縱軸「起點」與「終點」（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    align-content: space-between;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-content: space-between」語法，容器內元素第一行與最後一行分別貼緊縱軸「起點」與「終點」

align-content: space-around


在「flex_container」容器中使用「align-content: space-around」CSS 語法，容器內元素每行平均分配，並每行間距排列，且第一行與最後一行會與縱軸「起點」及「終點」之間保持最小距離（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    align-content: space-around;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-content: space-around」語法，容器內元素每行平均分配，且第一行與最後一行會與縱軸「起點」及「終點」之間保持最小距離

align-content: space-evenly


在「flex_container」容器中使用「align-content: space-evenly」CSS 語法，容器內元素每行平均分配，並每行間距排列，且第一行與最後一行元素會與縱軸「起點」及「終點」之間保持相同距離（如下方結果所示）。


CSS

.flex_container{ /*包袱容器*/
    width: 600px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    flex-wrap: wrap;
    align-content: space-evenly;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-content: space-evenly」語法，容器內元素每行平均分配，並每行間距排列，且第一行與最後一行物件會與縱軸「起點」及「終點」之間保持相同距離

CSS Flex 布局排版語法 – align-self 語法說明與使用

align-self：和「align-items」功能相同，但主要功能是控制容器內「單一元素」的「垂直對齊」位置設定。


可用屬性

  • stretch（預設值，將容器內的「單一元素」往縱軸的「起點」延伸到「終點」，但容器內的元素不能設定高度（height）才會生效）

  • flex-start（將容器內的「單一元素」從縱軸的「起點」開始排列）

  • flex-end（將容器內的「單一元素」從縱軸的「終點」開始排列）

  • center（將容器內的「單一元素」排列在縱軸的「起點」與「終點」之間置中排列）

  • baseline（使容器內「單一元素」中的文字底部會切齊排列）

以下 CSS 語法呈現：

align-self: stretch;

align-self: flex-start;

align-self: flex-end;

align-self: center;

align-self: baseline;

align-self: stretch


在「flex_container」容器中使用「align-self: stretch」CSS 語法，將容器內的「單一元素」往縱軸的「起點」延伸到「終點」，但容器內的元素不能設定高度（height）才會生效（如下方結果所示）。


以下 CSS 設定將容器內的「黃色」及「紫羅蘭色」元素不設定高度並設定「align-self: stretch」語法。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    background-color: yellow;
    align-self: stretch
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    background-color: blueviolet;
    align-self: stretch
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-self: stretch」語法，將容器內的「單一元素」往縱軸的「起點」延伸到「終點」

align-self: flex-start


在「flex_container」容器中使用「align-self: flex-start」CSS 語法，將容器內的「單一元素」從縱軸的「起點」開始排列（如下方結果所示）。


以下 CSS 設定將容器統一設定「align-items: center」語法讓所有元素統一在縱軸上置中，並指定容器內的「黃色」及「紫羅蘭色」元素設定「align-self: flex-start」語法，讓「黃色」及「紫羅蘭色」元素從縱軸的「起點」開始排列。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    align-items: center;
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
    align-self: flex-start;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
    align-self: flex-start;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-self: flex-start」語法，讓「黃色」及「紫羅蘭色」元素從縱軸的「起點」開始排列

align-self: flex-end


在「flex_container」容器中使用「align-self: flex-end」CSS 語法，將容器內的「單一元素」從縱軸的「終點」開始排列（如下方結果所示）。


以下 CSS 設定將容器統一設定「align-items: center」語法讓所有元素統一在縱軸上置中，並指定容器內的「黃色」及「紫羅蘭色」元素設定「align-self: flex-end」語法，讓「黃色」及「紫羅蘭色」元素從縱軸的「終點」開始排列。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
    align-items: center; /*縱軸置中*/
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
    align-self: flex-end;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
    align-self: flex-end;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-self: flex-end」語法，讓「黃色」及「紫羅蘭色」元素從縱軸的「終點」開始排列

align-self: center


在「flex_container」容器中使用「align-self: center」CSS 語法，將容器內的「單一元素」排列在縱軸的「起點」與「終點」之間置中排列（如下方結果所示）。


以下 CSS 設定為指定容器內的「黃色」及「紫羅蘭色」元素設定「align-self: center」語法，讓「黃色」及「紫羅蘭色」元素在縱軸的「起點」與「終點」之間置中排列。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 800px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
    align-self: center;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
    align-self: center;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-self: center」語法，讓「黃色」及「紫羅蘭色」元素在縱軸的「起點」與「終點」之間置中排列

align-self: baseline


在「flex_container」容器中使用「align-self: baseline」CSS 語法，使容器內「單一元素」中的文字底部會切齊排列（如下方結果所示）。


以下 CSS 設定為指定容器內的「黃色」及「紫羅蘭色」元素設定「align-self: baseline」語法，讓「黃色」及「紫羅蘭色」元素的文字底部會切齊排列（如下圖中的文字切齊橘色線條）。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 600px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 40px;
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: baseline;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 30px;
    background-color: deepskyblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 90px;
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: baseline;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 40px;
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
使用「align-self: baseline」語法，讓「黃色」及「紫羅蘭色」元素的文字底部會切齊排列

CSS Flex 布局排版語法 – order 語法說明與使用

order：用來設定容器內元素的排列順序。


可用屬性

「order」的預設值為 0 ，可針對容器內元素透過數字值來設定元素的排列順序，如：「order: -1」、「order: 1」、「order: 2」等數字值的大小來控制元素的排列順序，數字值越小，則排列越前面；數字值越大，則排列越後面。


以下 CSS 語法呈現：

order: -1;

order: 0;

order: 1;

order: 2;

以下範例說明：

以下容器內的顏色方形元素排列順序分別為：
黃色（2）、深天藍（4）、紫羅蘭色（3）、赤紅（1）。

[CSS Flex 布局排版教學] 網頁設計排版必學神器
顏色方形元素排列順序：黃色（2）、深天藍（4）、紫羅蘭色（3）、赤紅（1）

以下透過「order」 CSS 語法，將顏色方形元素排列順序調整為「赤紅（1）」、「黃色（2）」、「紫羅蘭色（3）」、「深天藍（4）」。

CSS

.flex_container{ /*包袱容器*/
    width: 800px;
    height: 600px;
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 180px;
    height: 180px;
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    order: 2;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 180px;
    height: 180px;
    background-color: deepskyblue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    order: 4;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 180px;
    height: 180px;
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    order: 3;
}
.flex_container .crimson{ /*赤紅*/
    width: 180px;
    height: 180px;
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    order: 1;
}

HTML

            <div class="flex_container"><!--包袱容器-->
                <div class="yellow">2</div><!--黃色-->
                <div class="deepskyblue">4</div><!--深天藍-->
                <div class="blueviolet">3</div><!--紫羅蘭色-->
                <div class="crimson">1</div><!--赤紅-->
            </div>

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
透過「order」 CSS 語法，將顏色方形元素排列順序調整為「赤紅（1）」、「黃色（2）」、「紫羅蘭色（3）」、「深天藍（4）」

CSS Flex 布局排版語法 – flex（flex-grow、flex-shrink、flex-basis）空間配置語法說明與使用

flex：為設定 Flex 容器內元素寬度的空間配置比例，由 flex-grow、flex-shrink、flex-basis 屬性所構成。


以下將針對 flex-grow、flex-shrink、flex-basis 語法與使用進行說明。

flex-grow 語法說明與使用


flex-grow：預設比例值為 0 ，不可為負值，依照所設定的元素比例值分配剩餘容器空間。


以下步驟化說明：

第一步

將 Flex 容器設定寬度為 500px（像素）及高度 60px（像素），而容器內的 4 個顏色方形元素高度及寬度都設定為 60 px（像素），剩餘寬度區域為 260px（像素）（如下方顯示結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 500px; /*寬度*/
    height: 60px; /*高度*/
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px; 
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: deepskyblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: blueviolet; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
}
.flex_container .crimson{/*赤紅*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
容器寬度 500px 及容器內元素寬度各 60px，剩餘區域為 260px
第二步

當「黃色方形 1 」設定為「flex-grow: 1」時，表示「黃色方形 1」與剩餘寬度區域 260px 為 1 份，剩餘區域寬度皆分配給「黃色方形 1 」，則「黃色方形 1」的寬度為 320px（60px + 260px）（如下方顯示結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 500px; /*寬度*/
    height: 60px; /*高度*/
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-grow: 1;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: deepskyblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: blueviolet; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
}
.flex_container .crimson{ /*赤紅*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
「黃色方形 1」與剩餘寬度區域 260px 為 1 份，則「黃色方形 1」的寬度為 320px
第三步

將「深天藍方形 2 」也設定為「flex-grow: 1」，將剩餘寬度區域 260px，分成 2 份，分配給「黃色方形 1」及「深天藍方形 2 」各 1 份，平均各分到 130px，因此「黃色方形 1」及「深天藍方形 2 」皆為 190px（如下方顯示結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 500px; /*寬度*/
    height: 60px; /*高度*/
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-grow: 1;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: deepskyblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-grow: 1;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: blueviolet; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
}
.flex_container .crimson{ /*赤紅*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
將剩餘寬度區域 260px，分成 2 份，分配給「黃色方形 1」及「深天藍方形 2 」各 1 份，平均各分到 130px，因此「黃色方形 1」及「深天藍方形 2 」皆為 190px
第四步

如果將「flex_container」容器的寬度設定為 100%，則會根據容器寬度自動將所設定為「flex-grow: 1」的元素做空間分配（如下方顯示結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 100%; /*寬度*/
    height: 60px; /*高度*/
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-grow: 1;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: deepskyblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-grow: 1;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: blueviolet; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
}
.flex_container .crimson{ /*赤紅*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

顯示結果

以下顯示結果會根據容器寬度自動做元素的空間分配。

[CSS Flex 布局排版教學] 網頁設計排版必學神器
往下箭頭圖示
[CSS Flex 布局排版教學] 網頁設計排版必學神器

flex-shrink 語法說明與使用


flex-shrink：預設比例值為 1 ，不可為負值，當容器內的元素寬度大於容器寬度時，會依照所設定的元素比例值壓縮元素寬度，使物件不超出容器外。

若將比例值設定為 0 ，則代表不做壓縮，這時若容器內元素的寬度超過容器寬度時，則元素會超出容器外。


以下步驟化說明：

第一步

將 Flex 容器設定寬度為 200px 及高度 60px，而容器內的 4 個顏色方形元素高度及寬度都設定為 60 px，此時 4 個顏色方形元素總寬度會是 240px，容器內元素寬度大於容器寬度，但因 Flex Box 容器預設為「flex-shrink: 1」，會自動將容器內元素平均壓縮寬度為 50px，使得容器內方形元素不會超出容器外（如下方顯示結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 200px; /*寬度*/
    height: 60px; /*高度*/
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 1; /*預設值，可不寫*/
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: deepskyblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 1; /*預設值，可不寫*/
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: blueviolet; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 1; /*預設值，可不寫*/
}
.flex_container .crimson{ /*赤紅*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    flex-shrink: 1; /*預設值，可不寫*/
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
容器內元素平均分配壓縮寬度
第二步

將「flex_container」容器內的 4 個顏色方形元素設定為「flex-shrink: 0」，讓元素不因容器寬度過小而壓縮元素寬度，則會顯示 4 個顏色方形元素排列會超出容器外（如下方顯示結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 200px; /*寬度*/
    height: 60px; /*高度*/
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 0;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: deepskyblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 0;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: blueviolet; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 0;
}
.flex_container .crimson{ /*赤紅*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    flex-shrink: 0;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
顏色方形元素排列會超出容器外
第三步

如果將「黃色方形 1」設定為「flex-shrink: 1」，則只有「黃色方形 1」會依照容器寬度比例進行寬度壓縮（如下方顯示結果所示）。

CSS

.flex_container{ /*包袱容器*/
    width: 200px; /*寬度*/
    height: 60px; /*高度*/
    border: 2px solid #0000FF; /*藍色外框線*/
    display: flex; /*宣告為 Flex Box 容器*/
}
.flex_container .yellow{ /*黃色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 1;
}
.flex_container .deepskyblue{ /*深天藍*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: deepskyblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 0;
}
.flex_container .blueviolet{ /*紫羅蘭色*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: blueviolet; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 26px;
    flex-shrink: 0;
}
.flex_container .crimson{ /*赤紅*/
    width: 60px; /*寬度*/
    height: 60px; /*高度*/
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    flex-shrink: 0;
}

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器
「黃色方形 1」會依照容器寬度比例進行寬度壓縮

flex-basis 語法說明與使用


flex-basis：預設比例值為 auto ，與 width 設定相同，都是用來設定元素的寬度，但設定優先權高於 width 寬度設定語法。


以下範例說明：

將「深天藍」同時設定「width: 100px」及「flex-basis: 60px」，一樣都是設定寬度，但寬度設定會以「flex-basis: 60px」為主。

CSS

.deepskyblue{ /*深天藍*/
    flex-basis: 60px; /*寬度*/
    width: 100px; /*寬度*/
    height: 60px;
    background-color: deepskyblue; 
}

HTML

<div class="deepskyblue"></div>

顯示結果

[CSS Flex 布局排版教學] 網頁設計排版必學神器

flex 語法應用與說明


flex 語法格式

flex: （flex-grow 屬性） （flex-shrink 屬性） （flex-basis 屬性）


各屬性預設值

  • flex-grow: 0

  • flex-shrink: 1

  • flex-basis: auto

flex 語法預設屬性值寫法：

flex: 0 1 auto

可透過以上 flex 語法格式來設定 flex-grow、flex-shrink、flex-basis 屬性值。


參考文章


相關延伸文章閱讀
[CSS Flex] div 水平及垂直置中語法

相關延伸文章閱讀
[CSS Flex] 透過 Flex（彈性盒子）達到左右分割效果

  • ※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！

  • ※歡迎分享本篇文章網址給需要的朋友。

  • ※本篇文章著作所有權皆屬於「科技阿宅王」網站所有，引用文章時請來信索取授權，否則將保留法律追訴權，謝謝。

科技阿宅

科技阿宅

熱愛資訊科技，平常喜歡研究資訊科技、程式的不專業資訊人，希望我的文章分享能幫助到你 ٩(●ᴗ●)۶

商業合作信箱：
[email protected]


您可能會有興趣的文章：

[WordPress SEO 優化排名外掛] Rank Math SEO 完整使用與設定教學[WordPress SEO 優化排名外掛] Rank Math SEO 完整使用與設定教學 Cloudways 雲端主機教學〈10 分鐘輕鬆架設好 WordPress 網站〉Cloudways 雲端主機教學〈10 分鐘輕鬆架設好 WordPress 網站〉 【網頁設計 | 網站架設】基礎概念完整教學【網頁設計 | 網站架設】基礎概念完整教學 [Linux 版本] ezgo 系統繁體中文 Linux 發行版本教學：內建眾多免費好用軟體[Linux 版本] ezgo 系統繁體中文 Linux 發行版本教學：內建眾多免費好用軟體 [VPN 推薦] 2024 精選人氣 VPN 評價介紹與比較[VPN 推薦] 2024 精選人氣 VPN 評價介紹與比較 [VM] VMware Workstation Pro / Player 知名虛擬機器軟體下載[VM] VMware Workstation Pro / Player 知名虛擬機器軟體下載 [關鍵字分析工具] Ubersuggest 教學：SEO 關鍵字研究必備工具[關鍵字分析工具] Ubersuggest 教學：SEO 關鍵字研究必備工具 VideoProc Converter〈影片下載、影片剪輯轉檔、螢幕錄影、DVD 轉檔〉多功能軟體VideoProc Converter〈影片下載、影片剪輯轉檔、螢幕錄影、DVD 轉檔〉多功能軟體 [線上 Logo 設計工具] DesignEvo – 免費線上品牌 Logo 設計工具[線上 Logo 設計工具] DesignEvo – 免費線上品牌 Logo 設計工具 [Google SEO 優化工具] Google Search Console 安裝與操作完整使用教學[Google SEO 優化工具] Google Search Console 安裝與操作完整使用教學

分類：網頁設計
標籤：

上一篇 :

下一篇 :

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *