CSS Flexbox 是一种布局模式，可以轻松和灵活地实现自适应竖向布局。本文介绍 Flexbox 的基本概念和语法，并提供几个示例展示如何使用 Flexbox 实现竖向布局。
什么是 Flexbox
Flexbox 是 Flexible Box 的简称，它是一种新的布局模式，用于改善传统的布局方式（如 Floats，Positioning 等），能够更好地适应不同屏幕尺寸和设备的不同屏幕方向。
使用 Flexbox，您可以通过确定容器和项目之间的关系来自动对齐、缩放和分布空间，从而实现灵活的布局。
基本语法
在 CSS 中，是通过定义容器和项目来使用 Flexbox。Flexbox 容器会根据所使用的方向（水平或垂直）来决定如何布局。
以下是 CSS 中定义 Flexbox 容器和项目的基本语法和属性：
-- -------------------- ---- -------
---------- -
-------- ----- -- ----- ------- --
--------------- ---- -- -------
---------------- ------- -- -------------
------------ ------- -- --------------
-
----- -
----- -- -- ---------
------ -- -- ---------
----------- ------- -- ------------
-注意以上代码中的属性只是 Flexbox 中的一部分，更多的属性和用法可以查看文档。
示例代码
以下是几个示例代码展示如何使用 Flexbox 实现自适应竖向布局。
示例一：垂直居中文本和按钮
使用 Flexbox 可以轻松地将文本和按钮垂直居中，而不管容器的高度变化。
HTML 代码：
<div class="container"> <p class="text">这是一段文本</p> <button class="button">按钮</button> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ------- ------ ---------------- ------- - ----- - ------- -- ----------- ------- - ------- - ----------- ------- -
示例二：自适应多列布局
使用 Flexbox 和 media query 可以轻松地实现自适应多列布局。
HTML 代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div>
CSS 代码：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
---------------- --------------
-
----- -
----------- ----------- - ------
-------------- -----
-
------ ---- ------ --- ----------- ------ -
----- -
----------- -------- - ------
-
-示例三：自适应宽度和高度的图像网格
使用 Flexbox 和 object-fit 属性可以轻松地实现自适应宽度和高度的图像网格。
HTML 代码：
<div class="container"> <img src="image1.jpg" alt="Image 1" class="item"> <img src="image2.jpg" alt="Image 2" class="item"> <img src="image3.jpg" alt="Image 3" class="item"> <img src="image4.jpg" alt="Image 4" class="item"> <img src="image5.jpg" alt="Image 5" class="item"> </div>
CSS 代码：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
---------------- --------------
-
----- -
------ ----------- - ------
-------------- -----
----------- ------
-
------ ---- ------ --- ----------- ------ -
----- -
------ -------- - ------
-
-总结
使用 Flexbox 可以在设计和开发自适应网站时提供更大的灵活性和控制性。在本文中，我们介绍了 Flexbox 的基本概念和语法，并提供了几个示例代码来展示如何使用 Flexbox 实现竖向布局。使用 Flexbox，您可以轻松地实现各种布局，而无需使用传统布局方式中的工具和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf11efb5eee0b52568a082