Flex 布局基础
Flex 布局基础
@jarringslee
文章目录
- Flex 布局基础
- Flex 布局基础概念
- Flex 容器属性
- `flex-direction`
- `flex-wrap`
- `justify-content`
- `align-items`
- `align-content`
- Flex 项目属性
- `flex`
- `align-self`
- 两列布局案例
Flex 布局基础概念
Flex 布局，即弹性盒子布局，是一种用于在页面上排列元素的一维布局模型。它允许子元素在主轴（row 或 column）上伸缩，以填充剩余空间或适应容器的大小变化，从而解决了传统布局中的一些常见问题，如元素对齐和空间分配等。
在 Flex 布局中，我们有两个关键的概念：Flex 容器和 Flex 项目。
- Flex 容器 ：当我们将一个元素的
display属性设置为flex时，该元素就成为了 Flex 容器，其子元素会自动成为 Flex 项目。 - Flex 项目 ：Flex 容器的直接子元素即为 Flex 项目，它们会在容器定义的主轴上进行排列。
Flex 容器属性
flex-direction
flex-direction 属性决定了 Flex 项目在容器中的排列方向。
row：默认值，项目从左到右水平排列，主轴为水平方向。row-reverse：与row相反，项目从右到左水平排列。column：项目从上到下垂直排列，主轴为垂直方向。column-reverse：与column相反，项目从下到上垂直排列。
.container {display: flex;flex-direction: row; /* 项目水平排列 */
}
flex-wrap
flex-wrap 属性决定了 Flex 项目是否可以换行或换列排列。
nowrap：默认值，项目不换行也不换列，全部排列在一条轴线上。wrap：项目可以换行排列，超出容器宽度时会自动换行。wrap-reverse：与wrap类似，项目可以换行排列，但换行后的项目会反向排列。
.container {display: flex;flex-wrap: wrap; /* 允许项目换行排列 */
}
justify-content
justify-content 属性决定了 Flex 项目在主轴上的对齐方式。
flex-start：默认值，项目从主轴起点开始排列。flex-end：项目从主轴终点开始排列。center：项目在主轴上居中排列。space-between：项目在主轴上均匀分布，相邻项目之间的间距相等，主轴起点和终点的项目与容器边缘的距离为 0。space-around：项目在主轴上均匀分布，相邻项目之间的间距相等，主轴起点和终点的项目与容器边缘的距离为主项目之间间距的一半。space-evenly：项目在主轴上均匀分布，相邻项目之间的间距相等，主轴起点和终点的项目与容器边缘的距离也相等。
.container {display: flex;justify-content: space-between; /* 项目在主轴上均匀分布 */
}
align-items
align-items 属性决定了 Flex 项目在交叉轴上的对齐方式。
stretch：默认值，项目在交叉轴方向上被拉伸以填充容器的空间。flex-start：项目在交叉轴起点对齐。flex-end：项目在交叉轴终点对齐。center：项目在交叉轴上居中对齐。baseline：项目在交叉轴上按照基线对齐。
.container {display: flex;align-items: center; /* 项目在交叉轴上居中对齐 */
}
align-content
align-content 属性决定了多行 Flex 项目在交叉轴上的对齐方式。
stretch：默认值，各行在交叉轴方向上被拉伸以填充容器的空间。flex-start：各行在交叉轴起点对齐。flex-end：各行在交叉轴终点对齐。center：各行在交叉轴上居中对齐。space-between：各行在交叉轴上均匀分布，相邻行之间的间距相等，交叉轴起点和终点的行与容器边缘的距离为 0。space-around：各行在交叉轴上均匀分布，相邻行之间的间距相等，交叉轴起点和终点的行与容器边缘的距离为行间距的一半。
.container {display: flex;flex-wrap: wrap;align-content: flex-start; /* 多行项目在交叉轴起点对齐 */
}
Flex 项目属性
属性决定了 Flex 项目的排列顺序，其取值为一个整数，数值越小，项目越靠前。
.item {order: 2; /* 项目排列顺序为 2 */
}
flex
flex 属性是一个简写形式，用于同时设置 flex-grow、flex-shrink 和 flex-basis。
flex-grow：项目的放大比例，默认值为 0，表示项目不会放大。flex-shrink：项目的缩小比例，默认值为 1，表示项目会在容器空间不足时进行缩小。flex-basis：项目的初始大小，默认值为 auto，表示根据内容自动调整大小。
.item {flex: 1; /* 项目可以放大和缩小，初始大小根据内容自动调整 */
}
align-self
align-self 属性允许单个 Flex 项目在交叉轴上独立于其他项目进行对齐。
auto：默认值，项目继承容器的align-items属性值。flex-start：项目在交叉轴起点对齐。flex-end：项目在交叉轴终点对齐。center：项目在交叉轴上居中对齐。baseline：项目在交叉轴上按照基线对齐。stretch：项目在交叉轴方向上被拉伸以填充容器的空间。
.item {align-self: flex-start; /* 项目在交叉轴起点对齐 */
}
两列布局案例
接下来，我们将通过一个简单的两列布局案例，来实际应用我们所学的 Flex 布局知识。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础两列</title><style>* {box-sizing: border-box;}.container {display: flex;width: 100%;height: 500px;}.sidebar {flex: 1;background-color: lightgray;padding: 20px;margin-right: 20px;}.content {flex: 3;background-color: white;padding: 20px;}</style>
</head>
<body><div class="container"><div class="sidebar"><h2>导航栏</h2><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul></div><div class="content"><h1>主页</h1><p>内容内容内容</p></div></div>
</body>
</html>
1. 首先，我们通过 `* { box-sizing: border-box; }` 设置了全局的盒模型为 `border-box`，这样可以确保元素的尺寸计算包含内边距和边框，避免了宽度和高度超出预期的问题。
2. 在 `.container` 中，我们设置了 `display: flex;` 将其定义为 Flex 容器，并设置了宽度为 100%，高度为 500px。
3. `.sidebar` 和 `.content` 分别代表侧边栏和内容区，它们都是 Flex 项目。我们通过 `flex: 1;` 和 `flex: 3;` 设置了它们的伸缩比例，使它们在主轴上平分剩余空间，侧边栏占据 1 份，内容区占据 3 份。
4. 同时，为侧边栏设置了右侧外边距 `margin-right: 20px;`，使其与内容区之间产生间距。
以上代码实现了一个简单的两列布局页面，左侧为导航栏，右侧为内容区，通过 Flex 布局实现了灵活的空间分配和对齐。