目录
一，flex布局VS传统布局
1.1传统布局
实现上面的结构，我们可以使用span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统布局</title>
<style>
div{
width: 80%;
height: 300px;
background-color: pink;
}
div span{
width: 150px;
height: 100px;
background-color: aqua;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</html>
1.2flex布局
Flex布局是CSS的一种布局模式，用于在容器内分配空间并对齐项目。它使得设计灵活且响应式。核心概念包括：
- 容器 (
display: flex): 定义一个flex容器。 - 项目: 容器内的子元素，默认会在一行上排列。
- 主轴和交叉轴: 主轴是容器的主方向（水平或垂直），交叉轴垂直于主轴方向。
- 对齐属性: 如
justify-content（主轴对齐）、align-items（交叉轴对齐）、align-self（项目单独对齐）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统布局</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</html>两者之间对比，只需要使用一个display：flex就可以完成
二.走进flex布局
上述我们讲解了flex的作用，现在我们开发一下它的使用
2.1justify-content：子元素布局
1.flex-start: 项目靠近主轴的起点对齐（默认值）。所有项目会从容器的起始边开始排列。
2.flex-end: 项目靠近主轴的终点对齐。所有项目会从容器的结束边开始排列。
3.space-around: 项目在主轴上均匀分布，项目之间的间距相等，但容器的起始边和结束边也会有项目的间距的一半。
4.space-between: 项目在主轴上均匀分布，项目之间的间距相等，容器的起始边和结束边与项目之间没有额外间距。
5.center: 项目在主轴上居中对齐。所有项目会在容器的中间对齐。
6.space-evenly: 项目在主轴上均匀分布，所有项目之间的间距以及项目与容器边缘之间的间距都相等。
2.2flex-direction：主轴方向
设置主轴方向：
row：默认从左到右
row-reverse:从右到左
column:从上到下
colum:从下到上
注：主轴为X，侧轴方向就是y
2.3flex-wrap：是否换行
flex-wrap是 Flexbox 中的一个属性，用于控制项目是否换行以及如何换行。它决定了当项目超出容器的主轴空间时，项目如何在容器中换行。
1.nowrap: 默认值。项目不会换行，所有项目都在一行上，即使这会导致容器溢出。
注：如果子元素元素的数目超出了父元素的容纳量，子元素的宽度会自动缩小
2.wrap: 项目会在主轴空间不足时换行，形成多行。第一行的项目将从容器的起始边开始，第二行的项目接在第一行的下方，依此类推。
3.wrap-reverse: 项目会在主轴空间不足时换行，但换行的顺序是反向的。第一行的项目从容器的结束边开始，第二行的项目在第一行的上方，依此类推。
2.4align-items：单行分布
让子元素在父容器里，实现垂直居中,也就是y轴上的分布
1.flex-satrt :项目靠近交叉轴的起始边对齐。
2.flex-end: 项目靠近交叉轴的结束边对齐。
3.center: 项目在交叉轴上居中对齐。
4.baseline: 项目沿着其文本基线对齐，使得所有项目的文本基线对齐。
5.stretch: 默认值。项目在交叉轴上拉伸以填充容器（如果项目的高度或宽度是自动的）。
2.5align-content：多行分布
用于控制多行或多列项目的对齐方式的属性。它决定了在交叉轴（即与主轴垂直的方向）上，行（或列）之间的对齐和分布。这个属性在容器内有多行或多列项目时才会生效。
需要使用flex-wrap搭配使用！
1.flex-start: 行（或列）靠近交叉轴的起始边对齐
2.flex-end: 行（或列）靠近交叉轴的结束边对齐。
3.center: 行（或列）在交叉轴上居中对齐。
4.space-between: 行（或列）在交叉轴上均匀分布，项目之间的间距相等，容器的起始边和结束边与行（或列）之间没有额外间距。
5.space-around: 行（或列）在交叉轴上均匀分布，项目之间的间距相等，但容器的起始边和结束边也会有项目的间距的一半。
2.6flex-flow: 设置主轴方向和是否换行
row: 按行排 nowrap: 不换行 wrap：换行 column：按列排
.container {
display: flex;
flex-flow: row nowrap;
}
三.子元素的属性
3.1flex:子项目占的份额
定义子项目分配剩余空间，用flex表示份数
例如：一个父容器里有三个子项目，其中，A占80px，B占20px，但是剩下的部分全给B，所以我们可以使用flex：1
3.2align-self:控制自己在侧轴的排列
例如，父亲元素安排好了flex,但是我希望第三个元素容器，可以不听指挥，在底部显示：
align-self:end
3.3order: 子项目的排序
例如我希望将父项目的第二个元素向前移动一位，使用order：-1即可
注：
一旦将父元素设置为flex布局，子元素的float、clear和vertical-align苏醒就失效了！
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
