概述
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-container {
display: flex; /* 或 inline-flex */
}创建 Flex item
Flex item 是 Flex container 内的所有子元素。Flex item 可以设置特定属性来定义其行为和排列顺序。
Flex item 的默认行为是沿着主轴（main axis）上水平方向水平排列，垂直方向垂直排列。
以下是三个示例子元素：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div>
.flex-container {
display: flex;
}
.flex-item {
/* ... */
}Flex container 属性
Flex container 有多个属性可用于控制其布局和行为。
flex-direction
flex-direction 属性用于定义 Flex container 内的 Flex items 沿主轴方向的排列方式。默认值是 row。
.flex-container {
flex-direction: row; /* 水平方向从左往右排列 */
flex-direction: row-reverse; /* 水平方向从右往左排列 */
flex-direction: column; /* 垂直方向从上往下排列 */
flex-direction: column-reverse; /* 垂直方向从下往上排列 */
}justify-content
justify-content 属性用于控制 Flex item 沿主轴方向的对齐方式。默认值是 flex-start。
.flex-container {
justify-content: flex-start; /* 显示在 main axis 起点位置 */
justify-content: flex-end; /* 显示在 main axis 终点位置 */
justify-content: center; /* 显示在 main axis 中心位置 */
justify-content: space-between; /* 在 main axis 空间均匀分布 */
justify-content: space-around; /* 在 main axis 空间均匀分布，两端的间距为 Item 间距的一半 */
justify-content: space-evenly; /* 在 main axis 空间均匀分布，每个 Item 间距相等 */
}align-items
align-items 属性用于控制 Flex item 沿交叉轴（cross axis）方向的对齐方式。默认值是 stretch。
.flex-container {
align-items: stretch; /* 拉伸 Item 填充整个交叉轴 */
align-items: flex-start; /* 显示在 cross axis 起点位置 */
align-items: flex-end; /* 显示在 cross axis 终点位置 */
align-items: center; /* 显示在 cross axis 中心位置 */
align-items: baseline; /* 使用第一行文本的基线对齐 */
}flex-wrap
flex-wrap 属性用于控制 Flex item 在一行内放不下时的换行方式。默认值是 nowrap。
.flex-container {
flex-wrap: nowrap; /* 不换行 */
flex-wrap: wrap; /* 换行 */
flex-wrap: wrap-reverse; /* 换行并反转排列顺序 */
}align-content
align-content 属性用于控制多行 Flex item 的对齐方式，仅在多行情况下生效。默认值是 stretch。
-- -------------------- ---- ------- --------------- - -------------- -------- -- --- ---- --------- -- -------------- ----------- -- --- ----- ---- ---- -- -------------- --------- -- --- ----- ---- ---- -- -------------- ------- -- --- ----- ---- ---- -- -------------- -------------- -- - ----- ---- ------ -- -------------- ------------- -- - ----- ---- ------------- ---- ----- -- -------------- ------------- -- - ----- ---- --------- ---- ---- -- -
Flex item 属性
Flex item 有多个属性可用于控制其布局和行为。以下是最常用的三种属性：
flex
flex 属性用于定义 Flex item 的扩展方式。默认值是 0 1 auto。
.flex-item {
flex: 0 1 auto; /* 等价于 flex: auto; */
flex: 1 1 auto; /* 充分利用可用空间 */
flex: 1 0 30%; /* 指定固定宽度，但要根据空间大小动态调整 */
}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。
.flex-item {
align-self: auto; /* 继承 align-items 的值 */
align-self: flex-start; /* 显示在 cross axis 起点位置 */
align-self: flex-end; /* 显示在 cross axis 终点位置 */
align-self: center; /* 显示在 cross axis 中心位置 */
align-self: baseline; /* 使用第一行文本的基线对齐 */
align-self: stretch; /* 拉伸 Item 填充整个交叉轴 */
}order
order 属性用于定义 Flex item 的排列顺序，默认情况下 Flex item 按照 HTML 中的顺序排列。order 值小的元素排在前面，值相同时按照 HTML 顺序排列。
.flex-item {
order: 0;
}示例
下面是一个使用 Flexbox 布局的示例代码：
<div class="flex-container"> <div class="flex-item" style="background-color: red;">1</div> <div class="flex-item" style="background-color: blue;">2</div> <div class="flex-item" style="background-color: yellow;">3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ---- ---------------- ------------- ------------ ------- ------- ------ - ---------- - ----- -- -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------------ ----- ------ ------ -
这段代码将创建一个横向一行，子元素间距平均分布的 Flex container。子元素均为 Flex item，使用 Flexbox 属性进行对齐。
在这个示例中，flex: 1 将平均分配子元素的宽度，并将它们的宽度扩展到可用空间的宽度。justify-content: space-around 将子元素之间的空间均匀分布，align-items: center 将子元素对齐于 cross axis 的中心。
总结
本文介绍了 Flexbox 布局的基础内容，包括如何创建 Flex container 和 Flex item，并设置其属性。这些属性非常强大，在实际项目开发中可以灵活应用。
在下一篇文章中，我们将更深入地介绍 Flexbox 布局，包括如何使用媒体查询和嵌套 Flexbox 容器等高级用法，敬请期待！
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64dff4bef6b2d6eab3b1bb69