引言
CSS Flexbox 是一种布局模式，可以轻松实现响应式设计，使得前端开发变得更加灵活。本文将介绍一些值得收藏的 CSS Flexbox 示例，同时给出详细的示例代码和解释，以便读者能够更好地理解并学习这一技术。
示例一：水平居中
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
-------- -----
---------------- -------
------------ -------
------- ------
----------------- --------
-
---- -
------ ------
------- ------
----------------- -----
-
--------
-------
------
---- ------------------
-------
-------以上代码展示了如何使一个 DIV 元素在页面中水平居中。display: flex 使得 body 元素成为了一个 flex container，justify-content: center 和 align-items: center 将 box 元素水平和垂直居中，并且 height: 100vh 将 body 的高度设置为视窗高度的百分之百。这样，即便页面大小发生变化，box 元素也始终会水平居中。
示例二：两栏布局
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
-------- -----
---------- -----
----------------- --------
------- ------
-
----- -
----------------- --------
----------- ----
------- -----
-
----- -
----------------- --------
----------- ----
------- -----
-
--------
-------
------
---- -------------------
---- -------------------
-------
-------以上代码展示了如何实现一个简单的两栏布局，其中 .box1 占据 75% 的宽度，.box2 占据 25% 的宽度。flex-wrap: wrap 使得当页面尺寸变小时，.box1 会占据多个行，而 .box2 会保持在右侧。
示例三：等分布局
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
------- ------
----------------- --------
-
---- -
----- --
----------------- -----
------- -----
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-------以上代码展示了如何创建一个项目等分的布局，即将页面分为三个部分，每个部分的宽度都相等。flex: 1 让 .box 元素占据可用空间的相等比例，因为它们的 flex 属性值相同。这样，即便容器大小发生变化，每个 .box 元素都会以相等的比例调整。
总结
CSS Flexbox 的强大之处在于，它允许我们在不同的屏幕尺寸和设备类型之间创建强大的布局。通过本文中提到的示例，我们可以体验到其灵活性和易于操作性。这些技术之所以值得收藏，是因为它们能够成为我们开发响应式布局的核心技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469b238968c7c53b098a8dc