CSS Flexbox 是一种强大的布局工具，它提供了一种灵活的方式来管理和控制 Web 页面上的元素布局。本篇文章将介绍 CSS Flexbox 的基本概念、使用方法和示例代码，帮助读者快速掌握这一技能。
什么是 CSS Flexbox
CSS Flexbox 也被称为 “弹性盒布局”，是一种 CSS3 新增的模块，用于对页面上的元素进行快速的灵活布局。它基于容器和其包含的项目来工作，而不是依赖传统的布局管理技术，例如 block 和 inline 等。
Flexbox 具有以下特性：
父元素（容器）和子元素（项目）都可以通过一组属性进行布局管理。
Flexbox 布局可以自适应不同大小和屏幕。
可以快速实现多个项目的垂直和水平居中。
可以更加方便的实现自适应布局，而无需依赖任何其他工具。
如何使用 CSS Flexbox
为了使用 Flexbox 进行布局，首先需要创建一个父元素（容器）和一个或多个子元素（项目）。然后根据需求使用以下 CSS 属性来控制布局：
容器属性
在父元素中，以下属性可用于指定 Flexbox 布局：
display:flex：将容器设置为 Flexbox 布局。flex-direction：row | column：指定项目在容器中的排列方向，可选值为行或列。flex-wrap：nowrap | wrap：确定项目是否在同一行或列上设置折行，默认值为不换行。justify-content：flex-start | flex-end | center | space-between | space-around | space-evenly：定义项目在主轴（水平方向）上的顺序，可选值包括项目的起点，终点和居中等。align-items：flex-start | flex-end | center | baseline | stretch：定义项目在侧轴（垂直方向）上的排列方式。align-content：flex-start | flex-end | center | space-between | space-around | stretch：定义多个行或列在容器内的排列方式。
项目属性
在每个子元素中，以下属性可用于控制 Flexbox 布局：
order：[integer]：指定项目的排列顺序，值越小排列越靠前。flex-grow：[integer]：允许项目扩展以填充可用空间的比例，默认为 0。flex-shrink：[integer]：允许项目缩小以适应可用空间的比例，默认为 1。flex-basis：[width]：定义元素在主轴上的初始大小。flex：grow shrink basis：以上三个属性的快捷设置（flex:1 1 0）。
Flexbox 初步示例代码
以下代码展示了如何使用上述属性实现基本 Flexbox 布局：
-- -------------------- ---- -------
-- ---- --
---------- -
-------- -----
--------------- ----
---------- -----
---------------- -------
------------ -------
-
-- ---- --
----- -
------ --
---------- --
------------ --
----------- -----
-在上述代码中，我们定义了一个容器类名为 .container，并将它设置为使用 Flexbox 布局。然后，我们使用相关属性指定项目（子元素）的排列方式，例如 flex-direction 定义项目的排列方向为行，flex-wrap 确定是否允许项目在同一行内折行等。
在项目属性中，我们可以按需指定每个子元素的排列方式，例如 order 属性可以控制项目的排列顺序，flex-grow 属性可以允许子元素扩展并占用可用空间，flex-basis 属性可以定义子元素在主轴上的初始大小等。
总结
CSS Flexbox 是一种强大的布局工具，可以更加灵活和方便地实现页面布局。本文介绍了 Flexbox 的基本概念和使用方法，并提供了示例代码，希望可以帮助读者掌握这一技能，应用到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650410f295b1f8cacd0cdca4