理解 Flexbox：一篇看懂弹性盒子布局-FunTeaLearn Online Web Tutorials

Flexbox 是一种用于网页布局的弹性盒子模型。它可以让我们更容易地实现响应式布局，以及更加灵活地控制元素的位置、大小和排列方式。在本文中，我们将深入探讨 Flexbox 的基本概念、属性和使用方法，帮助读者更好地理解和掌握这一技术。

基本概念

Flexbox 布局是基于一组容器和其中的一些子元素来实现的。容器可以是任何 HTML 元素，而子元素则是容器内部的直接子元素。在 Flexbox 中，容器和子元素都有一些重要的属性和概念，包括：

容器属性

display: 定义容器的显示方式为 Flexbox。
flex-direction: 定义子元素的排列方向，可以是行或列。
justify-content: 定义子元素在主轴上的对齐方式。
align-items: 定义子元素在交叉轴上的对齐方式。
flex-wrap: 定义子元素是否换行。

子元素属性

flex-grow: 定义子元素的扩展比例。
flex-shrink: 定义子元素的收缩比例。
flex-basis: 定义子元素的基础大小。
align-self: 定义子元素在交叉轴上的对齐方式。

属性详解

接下来，我们将逐一解释 Flexbox 中的各个属性，包括它们的取值范围、作用和使用方法。

`display`

display 属性用于定义容器的显示方式，取值可以是 flex、inline-flex 或 none。其中，flex 和 inline-flex 分别表示块级和行内块级的 Flexbox 容器，而 none 则表示不显示容器。

.container {
  display: flex;
}

`flex-direction`

flex-direction 属性用于定义子元素的排列方向，取值可以是 row、row-reverse、column 或 column-reverse。其中，row 和 row-reverse 表示水平方向的从左到右和从右到左排列，而 column 和 column-reverse 则表示垂直方向的从上到下和从下到上排列。

.container {
  flex-direction: row;
}

`justify-content`

justify-content 属性用于定义子元素在主轴上的对齐方式，取值可以是 flex-start、flex-end、center、space-between 或 space-around。其中，flex-start 和 flex-end 表示分别靠近主轴起始和结束位置，而 center 则表示居中对齐。

.container {
  justify-content: center;
}

`align-items`

align-items 属性用于定义子元素在交叉轴上的对齐方式，取值可以是 flex-start、flex-end、center、baseline 或 stretch。其中，flex-start 和 flex-end 表示分别靠近交叉轴起始和结束位置，而 center 则表示居中对齐。

.container {
  align-items: center;
}

`flex-wrap`

flex-wrap 属性用于定义子元素是否换行，取值可以是 nowrap、wrap 或 wrap-reverse。其中，nowrap 表示不换行，而 wrap 和 wrap-reverse 则表示允许换行，其中 wrap-reverse 表示反向换行。

.container {
  flex-wrap: wrap;
}

`flex-grow`

flex-grow 属性用于定义子元素的扩展比例，取值为一个非负整数。它表示当容器的空间有剩余时，子元素应该如何分配剩余空间。比例越大，分配到的空间就越多。

.item {
  flex-grow: 1;
}

`flex-shrink`

flex-shrink 属性用于定义子元素的收缩比例，取值为一个非负整数。它表示当容器的空间不足时，子元素应该如何收缩以适应容器。比例越大，收缩的幅度就越大。

.item {
  flex-shrink: 1;
}

`flex-basis`

flex-basis 属性用于定义子元素的基础大小，取值可以是一个长度值或一个百分比。它表示子元素在未分配空间时的大小。如果同时设置了 flex-basis 和 width，则 width 的优先级更高。

.item {
  flex-basis: 100px;
}

`align-self`

align-self 属性用于定义子元素在交叉轴上的对齐方式，取值可以是 auto、flex-start、flex-end、center、baseline 或 stretch。它与 align-items 的作用类似，但只作用于当前子元素。

.item {
  align-self: center;
}

示例代码

下面是一个简单的 Flexbox 布局示例，用于展示各个属性的作用和效果。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

-- -------------------- ---- -------
---------- -
  -------- -----
  --------------- ----
  ---------------- -------
  ------------ -------
  ---------- -----
-

----- -
  ---------- --
  ------------ --
  ----------- ------
  ----------- -------
-

在上面的示例代码中，我们创建了一个 Flexbox 容器，并在其中添加了三个子元素。然后，我们分别设置了容器的各个属性，以及子元素的各个属性。最终的效果是：三个子元素在水平方向上居中对齐，同时在垂直方向上自动换行，且每个子元素的宽度为 100 像素。

结语

以上就是关于 Flexbox 布局的详细介绍。通过本文的学习，相信读者已经对 Flexbox 的基本概念、属性和使用方法有了更深入的了解和掌握。在实际应用中，我们可以根据具体需求灵活地运用这些属性，实现更加优雅和高效的网页布局。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67964994504e4ea9bdd02e42

理解 Flexbox：一篇看懂弹性盒子布局