什么是CSS Flexbox

作为初学者开发人员，学习CSS flexbox很重要。它还通过优化元素的空间帮助实现响应式网页设计。

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

CSS Flexbox的术语

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

Flex容器 - 这是一个HTML元素，我们可以设置”display: flex”使其成为flexbox。
Flex项 - 这些是flexbox的项目，我们需要使用flexbox属性来恰当地排列它们。
主轴 - flexbox的主轴默认为左到右，但我们可以使用flexbox的”flex-direction” CSS属性来更改它。
交叉轴 - 交叉轴始终与主轴垂直。
主尺寸 - 它是沿着主轴的flexbox的特定尺寸。
交叉尺寸 - 这是flexbox在交叉轴上的特定尺寸。

Flexbox的属性

在上面的部分，我们已经学习了与flexbox一起使用的各种术语。现在，我们将通过下表学习可以与flexbox一起使用的各种CSS属性。

CSS 属性	属性值	属性用途
display	flex	用于将容器设置为 flexbox。
flex-direction	row	row-reverse
justify-content	flex-start	flex-end
align-items	stretch	baseline
order	<正整数值>	用于指定项目的顺序。
align-self	flext-start	flex-end
flex-wrap	nowrap	wrap
flex	`<flex-grow> <flex-shrink> <flex-basis>`	auto

现在，让我们通过以下示例来了解flexbox，其中我们使用了flexbox的各种属性。

示例1

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

在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

下面的示例演示了使用“align-items”CSS属性。它设置了弹性盒子的交叉轴上的弹性项的对齐方式。

在这里，我们为“align-items”CSS属性的所有值创建了单选按钮，就像第二个示例中一样。在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) {
         // add event listener to each radio button
         radioButton.addEventListener('change', function (event) {
            container.style.alignItems = event.target.value;
         });
      });
   </script>
</body>
</html>

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