什么是 CSS Flexbox?

对于初学者来说，学习 CSS Flexbox 非常重要。它还可以通过优化元素的空间，简化响应式网页设计。

CSS Flexbox 是一种布局模型，我们可以使用它来更好地排列子元素。如果弹性框的内容溢出，它还会更改弹性项目的尺寸，并尝试显示网页的所有内容。

CSS 弹性框术语

在本节中，我们将学习使用 CSS 弹性框布局时使用的基本术语。

• 弹性容器 − 它是一个 HTML 元素，我们为其设置了"display: flex"使其成为弹性框。

• 弹性项目 − 它们是弹性框的项目，我们需要使用弹性框属性正确排列它们。

• 主轴 − 弹性框的主轴默认从左到右，但我们可以使用弹性框的"flex-direction"CSS 属性进行更改。

• 横轴 − 横轴轴始终垂直于主轴。

• 主尺寸 − 弹性盒在主轴方向上特定尺寸的尺寸。

• 横轴尺寸 − 弹性盒在横轴方向上特定尺寸的尺寸。

弹性盒的属性

在上一节中，我们学习了弹性盒中使用的各种术语。现在，我们将通过下表学习可在弹性盒中使用的各种 CSS 属性。

现在，让我们通过以下示例来理解弹性框，这些示例使用了弹性框的各种属性。

示例 1

在下面的示例中，我们创建了"row"、"row-reverse"、"column"和"column-reverse"四个 div 元素。在每个 div 元素中，我们添加了两个子元素。此外，我们设置了"display: flex"，使所有四个 div 元素都成为独立的弹性框。

在 CSS 中，我们使用了"flex-direction"属性，其值根据 div 元素的类名而定。在输出中，用户可以观察子 div 元素的方向。

<html>
<head>
   <style>
      .child {
         width: 50px;
         height: 50px;
         background-color: red;
         margin: 10px;
         font-size: 2rem;
         color: white;
      }
      .row,
      .row-reverse,
      .column,
      .column-reverse {
         display: flex;
         width: 120px;
         height: 120px;
         background-color: blue;
         margin: 10px;
      }
      .row {flex-direction: row; }
      .row-reverse {flex-direction: row-reverse;}
      .column {flex-direction: column;}
      .column-reverse {flex-direction: column-reverse;}
   </style>
</head>
<body>
   <h3> Using the <i> flex-direction CSS property </i> of flexbox </h3>
   <div class = "row">
      <div class = "child"> 1 </div>
      <div class = "child"> 2 </div>
   </div>
   <div class = "row-reverse">
      <div class = "child"> 1 </div>
      <div class = "child"> 2 </div>
   </div>
   <div class = "column">
      <div class = "child"> 1 </div>
      <div class = "child"> 2 </div>
   </div>
   <div class = "column-reverse">
      <div class = "child"> 1 </div>
      <div class = "child"> 2 </div>
   </div>
</body>
</html>

示例 2

以下示例演示了"justify-content"CSS 属性的用法。我们定义了容器 div 元素，并添加了七个子 div 元素。之后，我们使用"display: flex"CSS 属性将容器设置为弹性盒子。

此外，我们还为"justify-content"CSS 属性的所有值创建了单选按钮。在 JavaScript 中，我们访问所选单选按钮的值，并相应地更改"justify-content"属性的值。

在输出中，用户可以选择不同的属性值并观察对齐方式的变化。

<html>
<head>
   <style>
      .container {
         width: 550px;
         height: auto;
         background-color: green;
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
      }
      .item {
         width: 100px;
         height: 100px;
         background-color: red;
         margin: 10px;
         text-align: center;
         color: white;
      }
   </style>
</head>
<body>
   <h3> Using the <i> Justify-content CSS property </i> of flexbox </h3>
   <div class = "container">
      <div class = "item"> one </div>
      <div class = "item"> two </div>
      <div class = "item"> three </div>
      <div class = "item"> four </div>
      <div class = "item"> five </div>
      <div class = "item"> six </div>
      <div class = "item"> seven </div>
   </div>
   <input type = "radio" name = "justify" value = "space-between"> space-between
   <input type = "radio" name = "justify" value = "space-around"> space-around
   <input type = "radio" name = "justify" value = "space-around"> space-evenly
   <input type = "radio" name = "justify" value = "flex-start" checked> flex-start 
   <input type = "radio" name = "justify" value = "flex-end"> flex-end
   <input type = "radio" name = "justify" value = "center"> center
   <script>
      var radio = document.getElementsByName("justify");
      var container = document.querySelector(".container");
      for (var i = 0; i < radio.length; i++) {
         radio[i].addEventListener("click", function () {
            container.style.justifyContent = this.value;
         });
      }
   </script>
</body>
</html>

示例 3

以下示例演示了 CSS 属性"align-itmes"的用法。它设置了弹性项目在弹性框横轴上的对齐方式。

这里，我们为 CSS 属性"align-items"的所有值创建了单选按钮，就像第二个示例一样。在 JavaScript 中，我们使用 forEach() 和 addEventListner() 方法为每个单选按钮添加了"change"事件。

选择任意值，在输出中垂直对齐项目并观察变化。

<html>
<head>
   <style>
      .container {
         width: 450px;
         height: 350px;
         background-color: blue;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
      }
      .item {
         width: 100px;
         height: 100px;
         background-color: pink;
         margin: 10px;
         font-size: 2rem;
         text-align: center;
         color: black;
      }
   </style>
</head>
<body>
   <h3> Using the <i> align-items CSS property </i> of flexbox </h3>
   <div class = "container">
      <div class = "item"> one </div>
      <div class = "item"> two </div>
      <div class = "item"> three </div>
   </div>
   <input type = "radio" name = "align-items" value = "flex-start"> flex-start
   <input type = "radio" name = "align-items" value = "flex-end"> flex-end
   <input type = "radio" name = "align-items" value = "center" checked> center
   <input type = "radio" name = "align-items" value = "baseline"> baseline
   <input type = "radio" name = "align-items" value = "stretch"> stretch
   <script>
      var radioButtons = document.querySelectorAll('input[type="radio"]');
      var container = document.querySelector('.container');
      radioButtons.forEach(function (radioButton) {
         // 为每个单选按钮添加事件监听器
         radioButton.addEventListener('change', function (event) {
            container.style.alignItems = event.target.value;
         });
      });
   </script>
</body>
</html>

在本教程中，用户学习了 CSS 弹性框。我们学习了弹性框的相关术语、所有与弹性框相关的 CSS 属性及其在表格中的值。在示例中，我们使用了各种弹性框属性，并学习了如何优化容器的空间。

相关文章

• 使用 CSS Animation 为 transform 属性添加动画
• CSS word-spacing 属性动画
• CSS width 属性动画
• CSS outline-color 动画
• CSS text-decoration-color 属性动画
• 在 CSS perspective-origin 属性上执行动画
• CSS text-shadow 属性动画
• CSS text-indent 属性动画
• CSS top 属性动画
• CSS outline-offset 属性动画

有用资源

• css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/