CSS 彈性佈局屬性指南：flex-direction 和 flex-wrap

CSS 彈性佈局屬性指南：flex-direction 和flex-wrap

在CSS 彈性佈局中，flex-direction 和flex-wrap 是兩個關鍵的屬性，它們可以幫助我們更好地控制彈性盒子的排列方式和換行行為。本文將為您詳細介紹這兩個屬性，並提供具體的程式碼範例。

一、flex-direction 屬性

flex-direction 屬性用來決定彈性盒子內部元素的主軸方向。主軸方向可以是水平方向（row）或垂直方向（column）。

常用取值：

1. row：預設值，主軸為水平方向。
2. row-reverse：主軸為水平方向，與 row 相反。
3. column：主軸為垂直方向。
4. column-reverse：主軸為垂直方向，與 column 相反。

程式碼範例：

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

上述程式碼將建立一個彈性容器，其中的子元素將根據預設的主軸方向水平排列。

二、flex-wrap 屬性

flex-wrap 屬性用來決定當彈性容器內的元素超出容器大小時是否換行。

常用取值：

1. nowrap：預設值，不換行，使子元素在一行內排列，可能會導致溢出。
2. wrap：當子元素寬度超過容器寬度時，換行並繼續排列。
3. wrap-reverse：當子元素寬度超過容器寬度時，反向換行並繼續排列。

程式碼範例：

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

上述程式碼將建立一個彈性容器，當容器寬度不足以容納所有子元素時，將自動換行排列。

綜合範例：

以下是一個綜合應用 flex-direction 和 flex-wrap 的範例。

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 200px;
  margin: 10px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

上述程式碼將建立一個垂直方向的彈性容器，當容器寬度不足以容納所有子元素時，將自動換行排列。

總結：

flex-direction 和 flex-wrap 是 CSS 彈性佈局中非常重要的屬性，透過靈活運用這兩個屬性，可以輕鬆實現不同的佈局效果。掌握它們的用法，將大大提升我們的頁面佈局能力。希望本文對您有幫助。

以上是CSS 彈性佈局屬性指南：flex-direction 和 flex-wrap的詳細內容。更多資訊請關注PHP中文網其他相關文章！