CSS 笔记——Flexbox（弹性盒布局）
目录
1. Flex 容器与 Flex 项目
2. 主轴与交叉轴
3. Flex 容器的属性
display
flex-direction
justify-content
align-items
align-content
flex-wrap
4. Flex 项目的属性
flex-grow
flex-shrink
flex-basis
flex
align-self
5. Flexbox 的优点
6. Flexbox 的应用场景
示例代码
总结
CSS Flexbox（弹性盒布局）是一种强大的布局模型，用于创建灵活且响应式的用户界面。以下是对 Flexbox 布局中主要知识点的详细介绍：
1. Flex 容器与 Flex 项目
Flex 容器：通过设置
display: flex;或display: inline-flex;，将一个元素变成 Flex 容器。Flex 项目：Flex 容器的直接子元素称为 Flex 项目。
直接子元素是指那些直接嵌套在某个元素内部的元素，而不包括嵌套在中间的其他元素内的元素。
代码示例
<div class="container"> <!-- Flex 容器 -->
<div class="item"></div> <!-- Flex 项目 -->
<div class="item"></div>
<div class="item"></div>
</div>2. 主轴与交叉轴
主轴（Main Axis）：Flex 容器的主要方向，默认是水平方向。
交叉轴（Cross Axis）：与主轴垂直的方向，默认是垂直方向。
3. Flex 容器的属性
以下是 Flex 容器可以设置的属性：
display
值：
flex或inline-flex作用：将容器设置为 Flexbox 布局。
.container {
display: flex; /* 或 inline-flex */
}flex-direction
作用：定义主轴的方向。
常见值：
row：主轴为水平方向（默认值）。
row-reverse：主轴为水平方向，但反向排列。
column：主轴为垂直方向。
column-reverse：主轴为垂直方向，但反向排列。
.container {
flex-direction: row; /* 水平排列 */
}justify-content
作用：定义子元素在主轴上的对齐方式。
常见值：
flex-start：子元素对齐主轴的起点。
flex-end：子元素对齐主轴的终点。
center：子元素在主轴上居中对齐。
space-between：子元素之间的间距相等，首尾元素分别对齐主轴的起点和终点。
space-around：子元素之间的间距相等，首尾元素与容器边缘的间距为其他间距的一半。
.container {
justify-content: center; /* 主轴居中对齐 */
}align-items
作用：定义子元素在交叉轴上的对齐方式。
常见值：
stretch：子元素在交叉轴上拉伸，填满整个容器（默认值）。
flex-start：子元素对齐交叉轴的起点。
flex-end：子元素对齐交叉轴的终点。
center：子元素在交叉轴上居中对齐。
baseline：子元素的基线对齐。
.container {
align-items: center; /* 交叉轴居中对齐 */
}align-content
作用：定义多行子元素在交叉轴上的对齐方式（仅当子元素换行时有效）。
常见值：
flex-start：子元素对齐交叉轴的起点。
flex-end：子元素对齐交叉轴的终点。
center：子元素在交叉轴上居中对齐。
space-between：子元素之间的间距相等。
space-around：子元素之间的间距相等，首尾元素与容器边缘的间距为其他间距的一半。
stretch：子元素在交叉轴上拉伸，填满整个容器。
.container {
align-content: space-between; /* 多行子元素间距相等 */
}flex-wrap
作用：定义子元素是否可以换行。
常见值：
nowrap：子元素不换行（默认值）。
wrap：子元素在必要时换行。
wrap-reverse：子元素在必要时换行，但反向排列。
.container {
flex-wrap: wrap; /* 子元素可以换行 */
}4. Flex 项目的属性
以下是 Flex 项目可以设置的属性：
flex-grow
作用：定义子元素在主轴上的伸缩比例。
值：数字，表示子元素可以占用的剩余空间比例。
.item {
flex-grow: 1; /* 子元素可以占用所有剩余空间 */
}flex-shrink
作用：定义子元素在主轴上的收缩比例。
值：数字，表示子元素在空间不足时的收缩比例。
.item {
flex-shrink: 1; /* 子元素可以收缩 */
}flex-basis
作用：定义子元素在主轴上的初始大小。
值：可以是具体的长度（如
100px）或auto（默认值）。
.item {
flex-basis: 100px; /* 子元素的初始宽度为 100px */
}flex
作用：
flex-grow、flex-shrink和flex-basis的简写形式。值：
flex: <flex-grow> <flex-shrink> <flex-basis>;常用值：
flex: 1;：等同于flex: 1 1 0;，表示子元素可以伸缩。
flex: auto;：等同于flex: 1 1 auto;，表示子元素可以伸缩，初始大小为auto。
flex: none;：等同于flex: 0 0 auto;，表示子元素不可伸缩。
.item {
flex: 1; /* 子元素可以伸缩 */
}align-self
作用：定义单个子元素在交叉轴上的对齐方式，覆盖
align-items的设置。常见值：与
align-items的值相同。
.item {
align-self: center; /* 单个子元素在交叉轴上居中对齐 */
}5. Flexbox 的优点
灵活性：Flexbox 可以轻松实现复杂的布局，如水平和垂直居中、等分空间等。
响应式：Flexbox 布局可以根据容器大小动态调整子元素的排列。
简单性：相比传统的布局方式（如浮动、定位），Flexbox 的代码更简洁，逻辑更清晰。
6. Flexbox 的应用场景
水平和垂直居中：通过
justify-content: center;和align-items: center;实现。等分空间：通过
flex: 1;或space-between实现。响应式布局：通过
flex-wrap和媒体查询实现。复杂布局：如导航栏、卡片布局、网格布局等。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 示例</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 300px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.item {
width: 80px;
height: 60px;
background-color: #4285f4;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0; /* 子元素不收缩 */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>总结
Flexbox 是一种非常强大的布局工具，适合处理一维布局（水平或垂直）。通过灵活的属性设置，可以轻松实现复杂的布局需求。掌握 Flexbox 的核心概念和常用属性，可以在现代 Web 开发中事半功倍。
