目錄

一、flex布局實例：把色子放進盒子里

1、基礎樣式

二、justify-content 屬性

三、flex-direction 屬性

四、align-items 屬性

五、flex-wrap 屬性

二、flex布局應用到常見場景

---

非常詳細的講解flex布局，看一看，練一練！

一、色子場景示例

核心知識點：display: flex將容器變為彈性容器，內部元素（色子）變為彈性項目，遵循 flex 布局規則。
假設我們有一個盒子（容器）和1- 6 個色子（項目），每個色子代表一個 flex 項目。如果不了解flex布局，請先閱讀? Flex彈性布局

1、基礎樣式

制作色子布局的基礎樣式，以下實例都需要用到如下樣式：

<style>
/* 主容器：使用Flex布局排列6個色子面 */.dice-container {display: flex;flex-wrap: wrap;gap: 20px;padding: 20px;}/* 每個色子面的基本樣式 */.dice {display: flex;width: 100px;height: 100px;border: 2px solid black;border-radius: 10px;background-color: white;padding: 10px;}/* 點的樣式 */.dot {width: 20px;height: 20px;border-radius: 50%;background-color: black;}
</style>

二、justify-content 屬性

?以下是css樣式和html代碼

 .justify-start-example {justify-content: flex-start;}

<div class="dice justify-start-example"><div class="dot"></div>
</div>

以下是css樣式和html代碼

.justify-end-example {justify-content: flex-end;}

    <div class="dice justify-end-example"><div class="dot"></div></div>

以下是css樣式和html代碼

.justify-center-example {justify-content: center;}

<div class="dice justify-center-example"><div class="dot"></div></div>

以下是css樣式和html代碼

.justify-space-between-example {justify-content: space-between;}

<div class="dice justify-space-between-example"><div class="dot"></div><div class="dot"></div></div>

?

?以下是css樣式和html代碼

 .justify-space-around-example {justify-content: space-around;}

<div class="dice justify-space-around-example"><div class="dot"></div><div class="dot"></div></div>

?

?以下是css樣式和html代碼

.justify-space-evenly-example {justify-content: space-evenly;}

<div class="dice justify-space-evenly-example"><div class="dot"></div><div class="dot"></div></div>

三、flex-direction 屬性

以下是css樣式和html代碼

.flex-direction-row {flex-direction: row;}

<div class="dice flex-direction-row"><div class="dot"></div><div class="dot"></div></div>

以下是css樣式和html代碼

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

<div class="dice flex-direction-column"><div class="dot"></div><div class="dot"></div></div>

?

以下是css樣式和html代碼

.flex-direction-row-reverse {flex-direction: row-reverse;}

<div class="dice flex-direction-row-reverse"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div></div>

?

以下是css樣式和html代碼

.flex-direction-column-reverse {flex-direction: column-reverse;}

<div class="dice flex-direction-column-reverse"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div></div>

?

四、align-items 屬性

以下是css樣式和html代碼

.align-items-flex-start {align-items: flex-start;}

<div class="dice align-items-flex-start"><div class="dot"></div></div>

?

以下是css樣式和html代碼

.align-items-flex-end {align-items: flex-end;}

<div class="dice align-items-flex-end"><div class="dot"></div></div>

?

以下是css樣式和html代碼

.align-items-center {align-items: center;}

<div class="dice align-items-center"><div class="dot"></div></div>

?

以下是css樣式和html代碼

.align-items-baseline {align-items: baseline;}

<div class="dice align-items-baseline"><div style="background-color: aquamarine; padding: 5px; font-size: 12px;">1</div><div style="background-color: aquamarine; padding: 5px; font-size: 28px;">2</div><div style="background-color: aquamarine; padding: 5px; font-size: 18px;">3</div></div>

?

以下是css樣式和html代碼

.align-items-stretch {align-items: stretch;}

<div class="dice align-items-stretch"><div style="background-color: aquamarine; padding: 5px; color:#000">1</div><div style="background-color: aquamarine; padding: 5px; color:#000">2</div></div>

?

五、flex-wrap 屬性

以下是css樣式和html代碼

.flex-wrap-nowrap {flex-wrap: nowrap;}

<div class="dice flex-wrap-nowrap"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div><div class="dot white textcenter">3</div><div class="dot white textcenter">4</div><div class="dot white textcenter">5</div><div class="dot white textcenter">6</div></div>

以下是css樣式和html代碼

.flex-wrap-wrap {flex-wrap: wrap;}

<div class="dice  flex-wrap-wrap"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div><div class="dot white textcenter">3</div><div class="dot white textcenter">4</div><div class="dot white textcenter">5</div><div class="dot white textcenter">6</div><div class="dot white textcenter">7</div><div class="dot white textcenter">8</div></div>

?

以下是css樣式和html代碼?

.flex-wrap-wrap-reverse {flex-wrap: wrap-reverse;}

<div class="dice flex-wrap-wrap-reverse"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div><div class="dot white textcenter">3</div><div class="dot white textcenter">4</div><div class="dot white textcenter">5</div><div class="dot white textcenter">6</div><div class="dot white textcenter">7</div><div class="dot white textcenter">8</div></div>

?

二、flex布局應用到常見場景

.dice.one {justify-content: center;align-items: center;}

 /* 兩點：對角 */.dice.two {justify-content: space-between;}.dice.two .dot:nth-child(2) {align-self: flex-end;}

?

/* 三點：對角 */.dice.three {justify-content: space-between;}.dice.three .dot:nth-child(2) {align-self: center;}.dice.three .dot:nth-child(3) {align-self: flex-end;}

?

/* 四點：2x2網格 */.dice.four {flex-wrap: wrap;justify-content: space-between;align-content: space-between;}.dice.four .column {flex-basis: 100%;display: flex;justify-content: space-between;}

?

/* 五點：4角+中心 */.dice.five {flex-wrap: wrap;justify-content: space-between;align-content: space-between;}.dice.five .column {flex-basis: 100%;display: flex;justify-content: space-between;}.dice.five .column:nth-child(2) {justify-content: center;}

?

/* 六點：3x2網格 */.dice.six {flex-wrap: wrap;justify-content: space-between;align-content: space-between;}.dice.six .column {flex-basis: 100%;display: flex;justify-content: space-between;}

實例結合理論【 flex布局基礎知識 】一定能做的很好！小伙伴們動手練習起來吧！