什么是 Flexbox？
Flexbox 是一种 CSS 布局模式，它提供了一个灵活的容器，可以在其中对其内部的子元素进行快速、直接的排列、对齐和分布控制，而无需使用传统的布局方式，如 float 和 position。
使用 Flexbox 布局可以极大地简化网站和应用的布局代码，减少了许多使用传统布局方式所需的样式规则，同时提供了更好的自适应性和可伸缩性。
Flexbox 基础
Flexbox 由容器和其内部的子元素组成，容器通过设置 display: flex 或 display: inline-flex 来启用 Flexbox 布局，子元素则被称为 Flex 项目。
容器属性
以下是常用的 Flexbox 容器属性：
display: 设置容器的渲染方式，必须设置为flex或inline-flex；flex-direction: 设置 Flex 项目的排列方向，在主轴上的方向，取值为row（默认值）、row-reverse、column、column-reverse；justify-content: 设置 Flex 项目在主轴上的对齐方式，取值为flex-start（默认值）、flex-end、center、space-between、space-around、space-evenly；align-items: 设置 Flex 项目在交叉轴上的对齐方式，取值为flex-start、flex-end、center、baseline、stretch（默认值）；align-content: 设置多行 Flex 项目在交叉轴上的对齐方式，取值与justify-content相同。
项目属性
以下是常用的 Flex 项目属性：
flex-basis: 设置项目的基准宽度或高度，可以是具体的数值或auto（默认值）；flex-grow: 设置项目在剩余空间内的放大比例，当值为0时，表示不放大；flex-shrink: 设置项目在空间不足时的缩小比例，当值为0时，表示不缩小；flex: 是flex-grow、flex-shrink和flex-basis的简写，其中flex-basis可省略；order: 控制项目的排列顺序，值为整数，默认值为0。
Flexbox 实例
下面是一个简单的 Flexbox 布局示例：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ ----------------- -------- - ----- - ------ ----- ------- ----- ----------------- -------- ------ ------ ----------- ------- ------------ ----- ------- - ----- -
该示例将容器设置为 Flexbox 布局，让子项水平居中对齐并垂直居中对齐，将容器的高度设置为 200px，背景色为 #f1f1f1。每个项具有相同的宽度和高度，背景颜色为 #4caf50，文字颜色为白色，水平和垂直居中，之间有 10px 的间隔。
总结
本文介绍了 Flexbox 布局的基础概念、常用属性以及实例代码，通过学习本文，你可以更有效地进行网页和应用的前端设计与布局，提高开发效率，实现更好的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653dd6367d4982a6eb7807f3