CSS的排版利器－Flexbox

14th鐵人賽 flex-box flex css

olddunk

2022-09-13 06:28:27

1189 瀏覽

分享至

昨天的程式碼已經用到了不少Flex來進行排版或是進行盒子上下及左右置中的工作，事實上，只要做網頁，很難避開Flex這個工具。

利用margin來排定元素之間的相對位置時，需要精準的計算元素的位置，有時元素個數一旦增減，又必須重新計算，今天介紹CSS的自動化排版工具－Flexbox。我們就昨天的盒子，做為排列的目標進行實作練習。

<div class="btns">
  <button type="button" class="btn medians">顯示中線</button>
  <button type="button" class="btn centroid">顯示重心</button>
  <button type="button" class="btn biperpendiculars">顯示中垂線</button>
  <button type="button" class="btn circumcentre">顯示外心</button>
</div>

Flexbox入門

以下是.btns和.btn的設定。

.btns {
  width: 500px;
  height: 100%;
  margin: 0 auto;
  padding: 10px 0; //上下內邊距為10px，左右內邊距設為0
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btn {
  width: 90px;
  height: 30px;
  margin: 0 10px; //給予按鈕左右外邊距
}

我們排版有縱、橫兩個方向，我們必須設定一個方向為主軸（預設為橫軸），另一個方向則為交錯軸，如果要將主軸設為縱軸，則用flex-direction設定，為了簡單起見，接下來的說明就以橫軸為主軸，縱軸為交錯軸。

flex-direction: column;

接下來在父元素.btns中用justify-content設定主軸排版，justify-content也可設成flex-start（靠左排列），flex-end（靠右排列）。如果想將空間均勻分配在按鈕之間，則可使用space-around和space-between，此時你的按鈕可以用不要設定margin。

當主軸只有一排時，交錯軸（縱軸）可使用align-items來排列。align-items常用的設定為flex-start、flex-end、center，看了名字大概就可以猜到它的效果。

其實align-itmes也可以設定成stretch，但是這邊有設定了height，所以不會作用。

現在我們其餘三個按鈕元素加入index.html檔中，

<button type="button" class="btn altitudes">顯示高</button>
<button type="button" class="btn orthocentre">顯示垂心</button>
<button type="button" class="btn Eulerline">顯示尤拉線</button>

因為此時七個按鈕寬度和外邊距總和已經超過它的容器寬度，我們在.btns可加入

flex-wrap: wrap;

讓它形成二排的排列，flex-wrap還可以設定為wrap-reverse。如果主軸形成多排時，交錯軸要使用align-content，除了flex-start、flex-end、center，也有space-between和space-around可設定。

Flexbox進階

如果我們想進一步控制每一個flex內的盒子元素的主軸長度（我們的例子是橫軸）的伸縮性，就要在盒子元素內設定flex-grow、flex-shrink和flex-basis的數值。

flex-grow：當父容器的主軸長度有餘裕時，此數值代表它伸展的比重，0則代表不伸展。
flex-shrink：當父容器的主軸長度不足時，此數值代表它收縮的比重，0則代表不收縮。
flex-basis：此元素的最小主軸長度。

我們讓index.html檔只剩下三個button元素
```html
<button type="button" class="btn medians">顯示中線</button>
<button type="button" class="btn centroid">顯示重心</button>
<button type="button" class="btn biperpendiculars">顯示中垂線</button>

我們在script.css中加入

.btn {
  flex-basis: 90px;
  height: 30px;
  margin: 10px;
}

.medians {
  flex-grow: 1;
}
.centroid {
  flex-grow: 0;
}
.biperpendiculars {
  flex-grow: 2;
}

因為我們的主軸是橫軸，所以用flex-basis代替width（我實作的結果，設定width也不會作用），因為我們的父容器寬度為500px，每個按鈕的flex-basis為90px，每個按鈕的左右margin各為10px，所以剩餘寬度為500 - 90 * 3 - 20 * 3，計算得170px，.centroid元素不伸展，寬度保持90px，.medians和.biperpendiculars的伸展比例為1:2，所以.medians的寬度為90 + 170 / 3px，大約等於146px，.biperpendiculars的寬度為90 + 170 * 2 / 3px，大約等於203px。

這邊我們略去框線的寬度，所以和實際量測有小小的誤差。

因為自行設定flex-grow、flex-shrink和flex-basis，所以最好要自行設定主軸的margin，justify-centent也不要設成space-between和space-around（實作也不會作用）。

今日程式碼連結

https://replit.com/@yegc22/iThomeIronman2022Day6?v=1

今日小結

排版最首要的工作便是定位，這也是非常瑣碎的工作，以前沒有Flex-box的工具的時候，只有float做靠右和靠左的的排版，其它部分，都要自己計算每個區塊的位置，非常辛苦，如今不但有Flex-box，更有威力更強大Grid可以簡化網頁開發人員的工作，真是太幸福了。明天我們會介紹處理科學符號的Mathjax套件，明天見！