CSS - flex-wrap

描述

flex-wrap 屬性決定了當彈性專案超過容器寬度或高度時是否應該換行。它管理了當空間有限時彈性專案在彈性容器內的排列方式。

可能的值

nowrap
wrap
wrap-reverse

應用於

所有HTML元素。

DOM 語法

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

Flex Wrap Nowrap

將flex-wrap 屬性設定為nowrap 值，可以確保彈性專案即使超過容器的寬度或高度也不會換行。

讓我們看一個例子：

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: #0ca14a;
   }
   .my-flex-container>div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items will remain on a single line.</h3>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

Flex Wrap

flex-wrap: wrap 屬性允許彈性專案在無法在一行中容納時換行到多行。

讓我們看一個例子：

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-wrap: wrap;
      background-color: #0ca14a;
   }
   .my-flex-container>div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items should move to a new line inside their container.</h3>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

Flex Wrap Wrap Reverse

您可以使用flex-wrap: wrap-reverse 屬性，彈性專案將排列在多行中，最後一行將出現在容器的開頭。

讓我們看一個例子：

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-wrap: wrap-reverse;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items should move to a new line in reverse order.</h3>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

列印頁面