997
社区成员
发帖
与我相关
我的任务
分享前端CSS-Flex布局| “朝闻道”知识分享大赛
这是我参加朝闻道知识分享大赛的第39篇文章。
Flexbox（弹性盒子布局）是 CSS3 提供的一种强大的布局模式，可以让容器内的元素根据布局需求自动分配空间，适用于一维布局（横向或纵向）。Flexbox 布局具有高灵活性，可以很方便地进行元素的对齐、分配空间、排序等操作。
1. 基本概念
在 Flexbox 布局中，有两个重要的概念：
-
Flex 容器：设置
display: flex;的元素，被称为 Flex 容器（flex container）。它包含所有 Flex 项目。 -
Flex 项目：Flex 容器的直接子元素称为 Flex 项目（flex item）。可以使用 Flexbox 的属性对它们进行布局控制。
.container {
display: flex; /* 将元素设置为 Flex 容器 */
}
2. Flex 容器的属性
Flex 容器的属性可以控制子元素在主轴和交叉轴上的排列、对齐、换行等。
2.1 flex-direction （主轴方向）
flex-direction 定义了主轴的方向，即 Flex 项目的排列方向。
-
row：水平方向，从左到右排列（默认值）。 -
row-reverse：水平方向，从右到左排列。 -
column：垂直方向，从上到下排列。 -
column-reverse：垂直方向，从下到上排列。
.container {
display: flex;
flex-direction: row; /* 可以是 row, row-reverse, column, column-reverse */
}
2.2 flex-wrap （换行）
flex-wrap 属性定义当一行容纳不下所有 Flex 项目时，是否允许换行。
-
nowrap：不换行（默认值）。 -
wrap：换行，项目按主轴方向排列。 -
wrap-reverse：换行，项目按相反方向排列。
.container {
display: flex;
flex-wrap: wrap;
}
2.3 justify-content （主轴对齐方式）
justify-content 控制 Flex 项目在主轴上的对齐方式。
-
flex-start：从主轴的起点对齐（默认值）。 -
flex-end：从主轴的终点对齐。 -
center：居中对齐。 -
space-between：项目间距均匀分布，第一个和最后一个项目紧贴容器边缘。 -
space-around：项目间距均匀分布，第一个和最后一个项目与容器边缘保留一半间距。
.container {
display: flex;
justify-content: center;
}
2.4 align-items （交叉轴对齐方式）
align-items 控制 Flex 项目在交叉轴上的对齐方式。
-
stretch：拉伸（默认值），填满容器高度。 -
flex-start：从交叉轴的起点对齐。 -
flex-end：从交叉轴的终点对齐。 -
center：居中对齐。 -
baseline：以项目的文本基线对齐。
.container {
display: flex;
align-items: center;
}
3. Flex 项目的属性
Flex 项目的属性用于控制项目自身的排列方式、大小等。
3.1 flex-grow （放大比例）
flex-grow 定义项目相对于其他项目的放大比例。
-
默认值为
0，即不放大。 -
例如，
flex-grow: 1表示项目会占据容器的剩余空间。
.item {
flex-grow: 1;
}
3.2 flex-shrink （缩小比例）
flex-shrink 定义项目相对于其他项目的缩小比例。
-
默认值为
1，表示项目在容器空间不足时可以缩小。 -
设置为
0则不会缩小。
.item {
flex-shrink: 1;
}
3.3 flex-basis （基础宽度）
flex-basis 用于指定项目的初始宽度或高度，值可以是 px、%、auto 等。
-
默认值：
auto，由内容或容器大小决定。
.item {
flex-basis: 200px;
}
3.4 align-self （单个项目的交叉轴对齐）
align-self 控制单个 Flex 项目在交叉轴上的对齐方式，允许覆盖 align-items 设置。
-
允许的值：
auto、flex-start、flex-end、center、baseline、stretch
.item {
align-self: center;
}
4. 综合示例
下面是一个包含所有属性的 Flexbox 综合布局示例。
<!DOCTYPE html>
<html lang="zh-CN">
<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;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-color: #f0f0f0;
padding: 10px;
gap: 10px;
height: 400px;
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
border-radius: 5px;
flex-grow: 1;
flex-basis: 100px;
}
.item.special {
flex-grow: 2;
flex-shrink: 0;
align-self: flex-end;
background-color: #FF5722;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item special">3 (special)</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
解释：
-
主轴方向：
flex-direction: row;设置为水平方向排列。 -
换行：
flex-wrap: wrap;，当空间不足时换行。 -
主轴对齐：
justify-content: space-around;，在主轴上均匀分布。 -
交叉轴对齐：
align-items: center;，项目在交叉轴上居中对齐。 -
特殊项目：
align-self: flex-end;使第三个项目在交叉轴上靠下对齐，flex-grow: 2;使其在主轴上占用双倍空间。
...全文
请发表友善的回复…
发表回复
