換行 flex‐wrap - daniel-qa/Vue GitHub Wiki

換行 flex-wrap

flex-wrap 是 CSS 的一個屬性，用來控制在使用 Flexbox 排版時，當主軸空間不足時，項目是否換行。

語法

flex-wrap: nowrap | wrap | wrap-reverse;

值的說明

nowrap 預設值，所有項目都會排在同一行，不會換行（超出會溢出）

wrap 項目會在空間不足時自動換行，從上到下排

wrap-reverse 項目會自動換行，從下到上排

範例

<div class="container">
  <div>項目1</div>
  <div>項目2</div>
  <div>項目3</div>
  <div>項目4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}
.container div {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

⚠️ GitHub.com Fallback ⚠️