CSS3 弹性盒布局

CSS3 提供了一种名为弹性盒布局的布局模式，通常称为 Flexbox。Flexbox（弹性盒）是 CSS3 的一种布局模式。使用此模式，您可以轻松创建复杂应用程序和网页的布局。它包括容器、弹性项目等。容器具有以下属性：

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

设置父 div

首先，设置一个父 div 并使用 `display: flex` 样式化容器。使用 `display: flex` 使弹性容器变得灵活。使用 `flex-wrap: wrap` 包裹弹性项目：

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   background-color: lightblue;
}

设置第一个容器

在父 div 中，现在设置第一个容器。

<div class="container1">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

现在，样式化第一个容器。我们为 div 设置了 `display: flex`。使用 `display: flex` 使弹性容器变得灵活：

.container1 {
   align-self: flex-start;
   display: flex;
   background-color: rgb(71, 30, 255);
   width: 200px;
   margin: 20px;
}

设置第二个容器

在父 div 中，设置第二个容器：

<div class="container2">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

现在，样式化第二个容器。我们为 div 设置了 `display: flex`。使用 `display: flex` 使弹性容器变得灵活。使用 `justify-content` 属性对齐弹性项目：

.container2 {
   display: flex;
   background-color: rgb(14, 126, 79);
   width: 200px;
   justify-content: center;
   align-self: flex-start;
   margin: 20px;
}

设置第三个容器

在父 div 中，设置第三个容器。

<div class="container3">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

现在，样式化第三个容器。我们为 div 设置了 `display: flex`。使用 `display: flex` 使弹性容器变得灵活：我们在这里还设置了 flex-direction。`flex-direction` 的 `column` 值将弹性项目垂直堆叠（从上到下）：

.container3 {
   display: flex;
   flex-direction: column;
   background-color: rgb(168, 60, 10);
   width: 200px;
   align-items: center;
   margin: 20px;
}

设置第四个容器

在父 div 中，设置第四个容器：

<div class="container4">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

现在，样式化第四个容器。

.container4 {
   background-color: rgb(26, 10, 168);
   width: 200px;
   margin: 20px;
}

示例

以下是使用 CSS3 显示弹性布局的代码：

<!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,
   .container2 > div,
   .container3 > div,
   .container4 > 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;
   }
   .container3 {
      display: flex;
      flex-direction: column;
      background-color: rgb(168, 60, 10);
      width: 200px;
      align-items: center;
      margin: 20px;
   }
   .container4 {
      background-color: rgb(26, 10, 168);
      width: 200px;
      margin: 20px;
   }
   </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="container4">
         <div>1</div>
         <div>2</div>
         <div>3</div>
      </div>
   </div>
</body>
</html>

更新于：2023年10月31日

156 次浏览

开启您的职业生涯

完成课程，获得认证

开始学习
广告