使用 CSS3 包装弹性项

要使用 CSS3 包装弹性项，请使用 flex-wrap 属性。将值包装设置成能够包装。

包装弹性项

在这个示例中，我们使用 flex-wrap: wrap 包装弹性项。以下是我们的弹性容器：-

<div class="container">
   <div class="first">First Div</div>
   <div class="second">Second Div</div>
   <div class="third">Third Div</div>
</div>

我们对弹性容器进行了如下样式设置。flex-wrap 被设置成包装弹性项 -

.container {
   height: 300px;
   display: flex;
   width: 300px;
   border: 2px solid red;
   flex-wrap: wrap;
}

示例

以下是使用 CSS3 包装弹性项的代码 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .container {
         height: 300px;
         display: flex;
         width: 300px;
         border: 2px solid red;
         flex-wrap: wrap;
      }
      div {
         width: 150px;
         height: 100px;
         color: white;
         text-align: center;
         font-size: 20px;
      }
      .first {
         background-color: rgb(55, 0, 255);
      }
      .second {
         background-color: red;
      }
      .third {
         background-color: rgb(140, 0, 255);
      }
   </style>
</head>
<body>
   <h1>Flex wrap example</h1>
   <div class="container">
      <div class="first">First Div</div>
      <div class="second">Second Div</div>
      <div class="third">Third Div</div>
   </div>
</body>
</html>

包装弹性项并在项的周围设置相等的空间

在这个示例中，我们将使用 flex-wrap 包装弹性项 -

flex-wrap: wrap;

为了在项周围设置相等的空间，我们使用了 justify-content 属性 -

justify-content: space-evenly;

示例

让我们看下示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .container {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
         background-color: lightblue;
      }
      .container1 {
         align-self: flex-start;
         display: flex;
         background-color: rgb(71, 30, 255);
         width: 200px;
         margin: 20px;
      }
      .container1 > div {
         background-color: #f1f1f1;
         margin: 10px;
         padding: 10px;
         font-size: 30px;
      }
      .container2 {
         display: flex;
         background-color: rgb(14, 126, 79);
         width: 200px;
         justify-content: center;
         align-self: flex-start;
         margin: 20px;
      }
      .container2 > div {
         background-color: #f1f1f1;
         margin: 10px;
         padding: 10px;
         font-size: 30px;
      }
      .container3 {
         display: flex;
         flex-direction: column;
         background-color: rgb(168, 60, 10);
         width: 200px;
         align-items: center;
         margin: 20px;
      }
      .container3 > div {
         background-color: #f1f1f1;
         margin: 10px;
         padding: 10px;
         width: 20px;
         font-size: 30px;
      }
   </style>
</head>
<body>
   <h1>Flex layout example</h1>
   <div class="container">
      <div class="container1">
         <div>1</div>
         <div>2</div>
         <div>3</div>
      </div>
      <div class="container2">
         <div>1</div>
         <div>2</div>
         <div>3</div>
      </div>
      <div class="container3">
         <div>1</div>
         <div>2</div>
         <div>3</div>
      </div>
      <div class="container1">
         <div>1</div>
         <div>2</div>
         <div>3</div>
      </div>
   </div>
</body>
</html>

更新于： 2023 年 11 月 2 日

94 次浏览

开启您的 事业

完成课程并取得认证

开始
广告