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>

打印页面