概述
Flexbox 是一种强大的 CSS 布局模型，可以非常方便地实现复杂的页面布局。Flexbox 已经成为现代前端开发中不可或缺的一部分。
Flexbox 提供了一种基于弹性盒子（flex box）的布局方式，能够在不同的屏幕和设备上自适应地调整布局。与传统的 float 和 position 布局方式相比，Flexbox 更加灵活和轻便，代码可读性和维护性大大提高。
在本篇文章中，我们将介绍 Flexbox 最基础的内容，包括如何创建 Flex container 和 Flex item，并设置其属性。
创建 Flex container
Flexbox 使用弹性盒子的概念来布局。在 Flexbox 布局中，父容器称为 Flex container，所有的子元素则称为 Flex item。
创建一个 Flex container 需要设置父容器的 display 属性为 flex 或 inline-flex。这将使用弹性盒子模型来布局子元素。
--------------- - -------- ----- -- - ----------- -- -
创建 Flex item
Flex item 是 Flex container 内的所有子元素。Flex item 可以设置特定属性来定义其行为和排列顺序。
Flex item 的默认行为是沿着主轴（main axis）上水平方向水平排列，垂直方向垂直排列。
以下是三个示例子元素：
---- ----------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------
--------------- - -------- ----- - ---------- - -- --- -- -
Flex container 属性
Flex container 有多个属性可用于控制其布局和行为。
flex-direction
flex-direction 属性用于定义 Flex container 内的 Flex items 沿主轴方向的排列方式。默认值是 row。
--------------- - --------------- ---- -- ---------- -- --------------- ------------ -- ---------- -- --------------- ------- -- ---------- -- --------------- --------------- -- ---------- -- -
justify-content
justify-content 属性用于控制 Flex item 沿主轴方向的对齐方式。默认值是 flex-start。
--------------- - ---------------- ----------- -- --- ---- ---- ---- -- ---------------- --------- -- --- ---- ---- ---- -- ---------------- ------- -- --- ---- ---- ---- -- ---------------- -------------- -- - ---- ---- ------ -- ---------------- ------------- -- - ---- ---- ------------- ---- ----- -- ---------------- ------------- -- - ---- ---- --------- ---- ---- -- -
align-items
align-items 属性用于控制 Flex item 沿交叉轴（cross axis）方向的对齐方式。默认值是 stretch。
--------------- - ------------ -------- -- -- ---- ------- -- ------------ ----------- -- --- ----- ---- ---- -- ------------ --------- -- --- ----- ---- ---- -- ------------ ------- -- --- ----- ---- ---- -- ------------ --------- -- ------------ -- -
flex-wrap
flex-wrap 属性用于控制 Flex item 在一行内放不下时的换行方式。默认值是 nowrap。
--------------- - ---------- ------- -- --- -- ---------- ----- -- -- -- ---------- ------------- -- --------- -- -
align-content
align-content 属性用于控制多行 Flex item 的对齐方式，仅在多行情况下生效。默认值是 stretch。
--------------- - -------------- -------- -- --- ---- --------- -- -------------- ----------- -- --- ----- ---- ---- -- -------------- --------- -- --- ----- ---- ---- -- -------------- ------- -- --- ----- ---- ---- -- -------------- -------------- -- - ----- ---- ------ -- -------------- ------------- -- - ----- ---- ------------- ---- ----- -- -------------- ------------- -- - ----- ---- --------- ---- ---- -- -
Flex item 属性
Flex item 有多个属性可用于控制其布局和行为。以下是最常用的三种属性：
flex
flex 属性用于定义 Flex item 的扩展方式。默认值是 0 1 auto。
---------- - ----- - - ----- -- --- ----- ----- -- ----- - - ----- -- -------- -- ----- - - ---- -- ------------------- -- -
flex 属性可以接受一个三值参数，分别表示：flex-grow，flex-shrink 和 flex-basis。其中：
flex-grow定义 Flex item 在剩余空间中的扩展比例，如果所有 Flex item 的flex-grow值相同，它们将均分可用空间。如果选择性地将一个 Flex item 的flex-grow值增加，它将比其他 Flex item 更具扩展性。flex-shrink定义 Flex item 在空间不足时的缩小比例。默认为1，表示在可用空间不足时，Flex item 将自动缩小，保持尽可能大的空间。如果所有 Flex item 的flex-shrink值相同，则它们将按比例缩小。flex-basis定义了 Flex item 的初始大小。它可以是一个固定值或自动，取决于 Flex item 内容的宽度。默认是auto，表示由元素的自身宽度自动设置大小。
align-self
align-self 属性允许每个 Flex item 单独定义交叉轴对齐方式。默认是继承父容器中的 align-items。
---------- - ----------- ----- -- -- ----------- -- -- ----------- ----------- -- --- ----- ---- ---- -- ----------- --------- -- --- ----- ---- ---- -- ----------- ------- -- --- ----- ---- ---- -- ----------- --------- -- ------------ -- ----------- -------- -- -- ---- ------- -- -
order
order 属性用于定义 Flex item 的排列顺序，默认情况下 Flex item 按照 HTML 中的顺序排列。order 值小的元素排在前面，值相同时按照 HTML 顺序排列。
---------- - ------ -- -
示例
下面是一个使用 Flexbox 布局的示例代码：
---- ----------------------- ---- ----------------- ------------------------ ------------- ---- ----------------- ------------------------ -------------- ---- ----------------- ------------------------ ---------------- ------
--------------- - -------- ----- --------------- ---- ---------------- ------------- ------------ ------- ------- ------ - ---------- - ----- -- -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------------ ----- ------ ------ -
这段代码将创建一个横向一行，子元素间距平均分布的 Flex container。子元素均为 Flex item，使用 Flexbox 属性进行对齐。
在这个示例中，flex: 1 将平均分配子元素的宽度，并将它们的宽度扩展到可用空间的宽度。justify-content: space-around 将子元素之间的空间均匀分布，align-items: center 将子元素对齐于 cross axis 的中心。
总结
本文介绍了 Flexbox 布局的基础内容，包括如何创建 Flex container 和 Flex item，并设置其属性。这些属性非常强大，在实际项目开发中可以灵活应用。
在下一篇文章中，我们将更深入地介绍 Flexbox 布局，包括如何使用媒体查询和嵌套 Flexbox 容器等高级用法，敬请期待！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64dff4bef6b2d6eab3b1bb69