CSS 属性

CSS flex-wrap 属性确定 Flex 项目是否应保留在单行上或允许换行到多行。当允许换行时，它确定行堆叠的方向。

属性值

  • nowrap: 默认值。 Flex 项目放置在一行中，该行可能会超出 Flex 容器。根据 flex-direction 值，交叉起点由起点或之前定义。

  • wrap: 弹性项目分成多行。交叉开始与开始或之前相同，具体取决于 flex-direction 值，而交叉结束则相反给定的交叉开始。

  • wrap-reverse: 它包装类似于换行的弹性项目，但交叉开始和交叉结束的位置交换。

适用范围

Flex 容器。

语法

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

CSS flex-wrap: nowrap 

以下示例演示了使用 flex-wrap: nowrap 属性，当浏览器窗口水平调整大小时，Flex 项目将保持在同一行，即使它们溢出了 Flex 容器 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      padding: 10px;
      margin: 10px;
      width: 50px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>当您调整浏览器窗口大小时，弹性项目将保留在一行上。</h3>
   <div class="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>

CSS flex-wrap: wrap 

以下示例演示了 flex-wrap:wrap 属性允许 Flex 项目在无法容纳在单行中时分成多行 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-wrap: wrap;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      padding: 10px;
      margin: 10px;
      width: 50px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>当您调整浏览器窗口大小时，Flex 项目应移动到其容器内的新行。</h3>
   <div class="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>

CSS flex-wrap: wrapper-reverse

以下示例演示了 flex-wrap:wrap-reverse 属性将 Flex 项目排列在多行中，并以相反的顺序包装 Flex 项目 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-wrap: wrap-reverse;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 50px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>当您调整浏览器窗口大小时，弹性项目应以相反的顺序移动到新行。</h3>
   <div class="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>