引言
为什么存在？
Flex 布局的出现是为了解决传统 CSS 布局方式（如浮动布局、定位布局等）在处理复杂布局时的诸多限制和不便。
优势
1. 简化布局
Flex 布局的语法简洁明了，代码更易读。
2. 强大的对齐能力
提供丰富的对齐属性，如 justify-content 和 align-items，轻松实现元素的对齐。
3. 响应式设计
天生支持响应式设计，元素可以根据屏幕大小自动调整。
4. 解决传统布局难题
垂直居中
Flex 布局的基本概念
Flex 容器（Flex Container）与 Flex 项目（Flex Item）
在 Flex 布局中，最基本的概念是 Flex 容器和 Flex 项目。
-
Flex 容器（Flex Container）：这是应用了
display: flex或display: inline-flex的元素。它是所有 Flex 项目的父元素，负责控制其子元素的布局。
-
Flex 项目（Flex Item）：这是 Flex 容器的直接子元素。Flex 项目会按照 Flex 容器设置的属性进行排列和对齐。
display: flex 与 display: inline-flex 的区别
display: flex 和 display: inline-flex 都用于定义一个 Flex 容器，但它们在布局上有一些区别：
-
display: flex：将元素定义为块级 Flex 容器。这意味着容器会占据其父容器的整个宽度（除非设置了宽度），并且每个 Flex 容器都会在新行开始。
-
display: inline-flex：将元素定义为行内 Flex 容器。这意味着容器只会根据其内容的大小来占据宽度，并且多个行内 Flex 容器可以排列在同一行中。
Flex 容器与项目的层级关系
Flex 容器和 Flex 项目之间存在层级关系：
1.Flex 容器：作为父元素，负责控制其子元素的布局。它可以设置各种 Flex 属性来影响子元素的排列和对齐。
2.Flex 项目：作为子元素，直接受到 Flex 容器的影响。它们会按照 Flex 容器的设置进行排列和对齐。
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>/* .flex-container {display: flex; background-color: #f0f0f0;padding: 10px;}
.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex: 1; } */.flex-container{display: flex;background-color: pink;padding: 10px;}.flex-item {background-color: green;color: white;padding: 20px;margin: 5px;text-align: center;flex: 1;/* max-width: 100px; 扩展，限制最大宽*/}</style>
</head>
<body>
<div class="flex-container"><div class="flex-item">项目 1</div><div class="flex-item">项目 2</div><div class="flex-item">项目 3</div>
</div>
</body>
</html>
在这个示例中：
-
.flex-container是 Flex 容器，设置了display: flex。 -
.flex-item是 Flex 项目，直接受到 Flex 容器的控制。
通过调整 Flex 容器的属性，可以控制 Flex 项目的排列和对齐。例如，设置 flex-direction 可以改变项目的排列方向，设置 justify-content 可以控制项目在主轴上的对齐方式，设置 align-items 可以控制项目在交叉轴上的对齐方式。
主轴和交叉轴
在 Flex 布局中，主轴和交叉轴是定义元素排列方式的两个关键概念：
-
主轴（Main Axis）：是 Flex 项目排列的主要方向，可以通过
flex-direction设置为水平（默认从左到右）或垂直。 -
交叉轴（Cross Axis）：与主轴垂直的方向，取决于主轴的方向设置。例如，当主轴为水平时，交叉轴为垂直方向。
设置主轴方向：flex-direction
flex-direction 控制 Flex 容器的主轴方向，有四种取值：
-
row（默认）：主轴为水平方向，起点在左。
css复制代码.flex-container {display: flex;flex-direction: row; } -
row-reverse：主轴为水平方向，起点在右。
css复制代码.flex-container {display: flex;flex-direction: row-reverse; } -
column：主轴为垂直方向，起点在上。
css复制代码.flex-container {display: flex;flex-direction: column; } -
column-reverse：主轴为垂直方向，起点在下。
css复制代码.flex-container {display: flex;flex-direction: column-reverse; }
控制换行：flex-wrap
flex-wrap 控制 Flex 项目是否换行：
-
nowrap（默认）：不换行，所有项目都在一行/列。
css复制代码.flex-container {display: flex;flex-wrap: nowrap; } -
wrap：允许换行，项目会自动换到下一行/列。
css复制代码.flex-container {display: flex;flex-wrap: wrap; } -
wrap-reverse：换行方向相反。
css复制代码.flex-container {display: flex;flex-wrap: wrap-reverse; }
主轴对齐：justify-content
justify-content 控制项目在主轴上的对齐方式：
-
flex-start：在主轴起点对齐（默认）。
-
flex-end：在主轴终点对齐。
-
center：在主轴中心对齐。
-
space-between：均匀分布，第一个项目在起点，最后一个项目在终点。
-
space-around：均匀分布，每个项目两侧间距相等。
示例：
css复制代码.flex-container {display: flex;justify-content: center;
}
交叉轴对齐：align-items
align-items 控制项目在交叉轴上的对齐方式：
-
flex-start：在交叉轴起点对齐。
-
flex-end：在交叉轴终点对齐。
-
center：在交叉轴中心对齐。
-
baseline：在项目文本基线对齐。
-
stretch（默认）：项目拉伸以填满容器。
示例：
css复制代码.flex-container {display: flex;align-items: center;
}
综合使用
通过组合 flex-direction、flex-wrap、justify-content 和 align-items 等属性，可以轻松实现各种复杂的布局需求，使得 Flex 布局在现代布局中极具灵活性和实用性。
Flex 布局的项目属性
Flex 布局提供了多个属性来控制 Flex 项目的行为和布局。以下是一些常用的项目属性：
1. order：控制项目的排列顺序
order 属性用于定义 Flex 项目在 Flex 容器中的排列顺序。默认情况下，所有项目的 order 值都是 0。数值越小，项目排列越靠前。
.item {order: <integer>; /* 默认值为 0 */
}
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;}
.item1 {order: 3;}
.item2 {order: 1;}
.item3 {order: 2;}</style>
</head>
<body>
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
</body>
</html>
在这个示例中，item2 的 order 值最小，所以它会排在最前面。
2. flex-grow：定义项目的放大比例
flex-grow 属性用于定义 Flex 项目在容器中有剩余空间时的放大比例。默认值为 0，即不放大。
.item {flex-grow: <number>; /* 默认值为 0 */
}
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-grow: 1;}
.item2 {flex-grow: 2;}</style>
</head>
<body>
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
</body>
</html>
在这个示例中，item2 的 flex-grow 值是 2，而其他项目的 flex-grow 值是 1，所以 item2 会占据更多的空间。
3. flex-shrink：定义项目的缩小比例
flex-shrink 属性用于定义 Flex 项目在容器空间不足时的缩小比例。默认值为 1，即项目会根据需要缩小。
.item {flex-shrink: <number>; /* 默认值为 1 */
}
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-shrink: 1;}
.item2 {flex-shrink: 0;}</style>
</head>
<body>
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
</body>
</html>
在这个示例中，item2 的 flex-shrink 值是 0，所以它不会缩小，而其他项目会根据需要缩小。
4.flex-basis：定义项目的初始尺寸
flex-basis 属性用于定义 Flex 项目在主轴方向上的初始尺寸。它可以设置为长度值（如 px, em, %）或 auto。默认值为 auto，即项目的尺寸由内容决定。
.item {flex-basis: <length> | auto; /* 默认值为 auto */
}
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-basis: 100px;}</style>
</head>
<body>
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
</body>
</html>
在这个示例中，所有项目的初始尺寸都是 100px。
5. align-self：单独设置项目在交叉轴上的对齐方式
align-self 属性用于单独设置 Flex 项目在交叉轴上的对齐方式。它会覆盖 Flex 容器的 align-items 属性。默认值为 auto，即继承容器的 align-items 属性。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;align-items: center;background-color: #f0f0f0;padding: 10px;height: 200px;}
.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;}
.item2 {align-self: flex-end;}</style>
</head>
<body>
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
</body>
</html>
在这个示例中，item2 的 align-self 值是 flex-end，所以它会单独对齐到交叉轴的终点，而其他项目会按照容器的 align-items 属性对齐到交叉轴的中心。
总结
优势
简化布局实现
响应式设计
局限性
低端浏览器适配
