Flexbox 布局（四）：Flexbox 布局下的细节总结-FunTeaLearn Online Web Tutorials

在前三篇文章中，我们已经介绍了 Flexbox 布局的基本概念、属性和实际应用。本文将对 Flexbox 布局下的一些细节进行总结，帮助读者更深入地理解和应用 Flexbox 布局。

1. 父元素的属性设置

在使用 Flexbox 布局时，常常需要对父元素进行一些属性设置。下面是一些常用的属性：

1.1 display

在使用 Flexbox 布局时，父元素需要设置 display: flex 或 display: inline-flex，以使其成为一个 Flex Container。

1.2 flex-direction

flex-direction 属性定义了 Flex Container 中 Flex Item 的排列方向，默认值为 row。常用值有：

row：Flex Item 横向排列；
column：Flex Item 纵向排列；
row-reverse：Flex Item 横向反向排列；
column-reverse：Flex Item 纵向反向排列。

1.3 justify-content

justify-content 属性定义了 Flex Item 在主轴上的对齐方式。常用值有：

flex-start：Flex Item 在主轴起点对齐；
flex-end：Flex Item 在主轴终点对齐；
center：Flex Item 在主轴居中对齐；
space-between：Flex Item 在主轴上均匀分布，首尾不留空白；
space-around：Flex Item 在主轴上均匀分布，首尾留有空白。

1.4 align-items

align-items 属性定义了 Flex Item 在交叉轴上的对齐方式。常用值有：

flex-start：Flex Item 在交叉轴起点对齐；
flex-end：Flex Item 在交叉轴终点对齐；
center：Flex Item 在交叉轴居中对齐；
baseline：Flex Item 在基线上对齐；
stretch：Flex Item 在交叉轴上拉伸以填满容器。

1.5 align-content

align-content 属性定义了多行 Flex Item 在交叉轴上的对齐方式。常用值有：

flex-start：多行 Flex Item 在交叉轴起点对齐；
flex-end：多行 Flex Item 在交叉轴终点对齐；
center：多行 Flex Item 在交叉轴居中对齐；
space-between：多行 Flex Item 在交叉轴上均匀分布，首尾不留空白；
space-around：多行 Flex Item 在交叉轴上均匀分布，首尾留有空白；
stretch：多行 Flex Item 在交叉轴上拉伸以填满容器。

2. 子元素的属性设置

在使用 Flexbox 布局时，子元素也需要进行一些属性设置。下面是一些常用的属性：

2.1 order

order 属性定义了 Flex Item 的排列顺序，默认值为 0。值越小，排列越靠前。

2.2 flex-grow

flex-grow 属性定义了 Flex Item 在空间分配时的放大比例，默认值为 0。如果所有 Flex Item 的 flex-grow 值都为 0，则它们的大小不会发生变化。如果某个 Flex Item 的 flex-grow 值为 1，则它会尽可能地占用剩余空间。

2.3 flex-shrink

flex-shrink 属性定义了 Flex Item 在空间分配时的缩小比例，默认值为 1。如果所有 Flex Item 的 flex-shrink 值都为 1，则它们的大小会等比例缩小。如果某个 Flex Item 的 flex-shrink 值为 0，则它不会缩小。

2.4 flex-basis

flex-basis 属性定义了 Flex Item 的初始大小。默认值为 auto，表示由元素自身决定大小。如果设置了 flex-basis，则 Flex Item 会先按照 flex-basis 设置大小，然后再根据 flex-grow 和 flex-shrink 进行分配。

2.5 flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。例如，flex: 1 0 auto 表示 flex-grow: 1; flex-shrink: 0; flex-basis: auto;。

2.6 align-self

align-self 属性定义了单个 Flex Item 在交叉轴上的对齐方式。它会覆盖父元素的 align-items 属性。常用值与 align-items 相同。

3. Flexbox 布局的实际应用

3.1 等分布局

在 Flex Container 中，如果所有 Flex Item 的 flex-grow 值都为 1，则它们会等分剩余空间。例如：

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

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

3.2 宽度固定，高度自适应布局

在 Flex Container 中，如果所有 Flex Item 的 flex-basis 值都为 0，则它们的宽度会固定，高度会自适应。例如：

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

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

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

3.3 响应式布局

在 Flex Container 中，可以根据屏幕宽度自动调整 Flex Item 的大小和排列方式。例如：

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

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

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

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

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

总结

Flexbox 布局是一种强大的布局方式，可以帮助我们轻松实现各种复杂的布局效果。在使用 Flexbox 布局时，需要了解父元素和子元素的属性设置，以及一些实际应用的技巧。希望本文能够对读者有所帮助。

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

Flexbox 布局（四）：Flexbox 布局下的细节总结