Flexbox（弹性盒子模型）是一种现代的 CSS 布局方式，可以更简单、灵活地实现网页布局。在过去的几年中，它已成为前端开发的行业标准。本文将介绍如何使用 Flexbox。
Flexbox 布局模型
Flexbox 是一种盒模型，它的布局是基于弹性元素的。利用 Flexbox，我们可以在任何方向上排列弹性元素（例如，水平或垂直）。Flexbox 容器是指一个包含了弹性元素的 HTML 元素。
概述
一般来说，Flexbox 主要包含以下元素：
- 容器 (display:flex)
- 项目 (flex)
- 主轴 (flex-direction)
- 次轴 (flex-wrap)
容器是包含所有项目的父元素。项目是容器中的所有元素，可以设置它们的大小与位置。主轴是弹性元素的排列方向，可以是水平或垂直方向。次轴是弹性元素在主轴上排不下时出现的方向。这些轴可以单独设置，但它们也可以一起工作。
容器
使用 Flexbox 布局，需要将容器设置为 display:flex;。这里显示的属性是一个简单的值，用于将容器变成 Flexbox 容器。
----------- -------- ----- -
如果你想从右到左布局，可以使用 display: inline-flex;。
项目
Flexbox 容器中的每个元素都被称为项目。
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
----------- -------- ----- - ------ ----- -- -
在这个例子中，Flexbox 的容器是包含三个项目的 <div>。每个项目都有一个类名 item。我们使用 flex: 1 属性来告诉浏览器每个弹性元素的宽度要相等。
主轴和次轴
Flexbox 的默认方向是水平的。如果你想垂直排列，请使用 flex-direction: column; 。此外，可以使用 justify-content 和 align-items 分别在主轴和次轴上调整元素的位置。例如：
----------- -------- ----- --------------- ---- -- ---- -- ---------------- ------- -- ------ -- ------------ ------- -- -------- -- -
空间分配
Flexbox 会自动为项目分配剩余空间，无需指定它们的指标。在上述示例中，我们使用了 flex: 1 属性，它使每个项目在 Flexbox 容器内均分空间。如果我们想让某个项目使用更多的空间，可以将 flex 属性设置为较大的值。
可伸缩性
另一个强大的 Flexbox 功能是容器内弹性元素的可伸缩性。这意味着在视口大小变化时，元素的大小将自动调整。我们可以通过 flex-grow、flex-shrink 和 flex-basis 属性来自定义可伸缩性。
flex-grow: 增大未使用空间的弹性元素的大小。flex-shrink: 减小弹性元素的大小，以适应容器的大小，并防止项目溢出。flex-basis: 定义弹性元素的默认大小。
flex 属性的问题
通常，不建议给 flex 属性使用如 flex: 1 0 auto; 这样的简写方式。原因是不同的浏览器，对 auto 的解析不一样。
如果你想在代码中保持一致性，我们建议使用 flex-grow、flex-shrink 和 flex-basis 这三个属性来替代 flex 属性。
其他优秀的 Flexbox 布局示例
等高的左右布局
---- ------------------
---- --------------- -------
---- --------------
----
------ -------
------ -------
-----
------
---------------- - -------- ----- - ----- - ----- -- - ------ - ----- -- -------- ----- --------------- ------- - ------ -- - ----- -- -
这个例子使用了两个弹性元素，使其高度相等，ViewPager 中用的比较多。
使用 Flexbox 进行悬停效果
---- ------------------ ---- -------------------- ------
---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ---- - ----- -- ----------------- ------- ----------- ------- ---------- ----- ----------- - ---- ---- ---------------- ---------- -------------- ----------- --------- ---- ----- - ---------- - ---------- ------------------ -
这个例子是一个特别有趣的悬停效果，应用了 CSS Transition 和 CSS Transform 属性。
总结
Flexbox 布局方便，灵活，减少了代码冗余和麻烦。它可以帮助开发者高效地创建布局，减少代码中的 bug。本文章介绍了基础的、灵活、有用的 Flexbox 在 Web 中的使用方法，希望对你有帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653df8a97d4982a6eb7939ce