什么是 CSS Flexbox？
CSS Flexbox 是一种 CSS 布局模式，它可以使容器元素中的子元素在两个轴上（水平和垂直）自由地拉伸和收缩，从而实现灵活和自适应的布局效果。它的全称是 Flexible Box，常被称为 flex。
为什么要使用 CSS Flexbox？
在 Web 前端开发中，实现灵活和自适应的布局是非常重要的一项技能。而使用 CSS Flexbox，可以更加轻松地实现这些效果，同时也可以解决传统布局模式的一些痛点，例如垂直居中、等高布局等。
如何实现垂直方向的自适应布局？
实现垂直方向的自适应布局非常简单，只需要使用 CSS Flexbox 的两个属性：display 和 flex-direction 即可。
display: flex：将容器元素设置为 Flexbox 布局模式。flex-direction: column：将子元素在垂直方向上排列，从而实现垂直布局的效果。
同时，还可以通过其他的 CSS Flexbox 属性和值来实现更加自由和灵活的布局效果，例如：
justify-content：定义子元素在容器元素中的水平对齐方式。align-items：定义子元素在容器元素中的垂直对齐方式。flex-wrap：定义子元素在容器元素中是否自动换行。flex：定义子元素的宽度、高度和弹性系数等。
下面是一个简单的示例代码，展示如何使用 CSS Flexbox 实现垂直方向的自适应布局：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
--------------- -------
------- ------
-
------- -
----- - - -----
----------------- --------
------- -----
------------ -----
-
----- -
----- - - -----
----------------- -----
-------- -----
-
------- -
----- - - -----
----------------- --------
------- -----
------------ -----
-
--------
-------
------
---- ------------------
------- ------------------------------
----- ------------------------
------- ------------------------------
------
-------
-------在这个示例代码中，.container 是容器元素，.header、.main 和 .footer 则是子元素。使用 display: flex 和 flex-direction: column 实现子元素在垂直方向上排列。其中，.header 和 .footer 使用固定的高度来展示头部和底部，.main 则使用 flex: 1 1 auto 来占满剩余的空间，并实现自适应的效果。
总结
使用 CSS Flexbox 实现垂直方向的自适应布局非常简单，同时也具有很高的灵活性和自由度。在实际开发中，可以根据具体的需求和设计，灵活运用 CSS Flexbox 的各种属性和值来实现更加优美和实用的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482ab2248841e989420addc