单元二 CSS3样式表端基础前Web单元2-7 定位之Flex布局2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。什么是Flex布局Flex是Flexible Box的缩写，意为”弹性布局”。用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ //行内元素的弹性布局 display: inline-flex;}.box{ display: flex;}设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，
Flex布局，全称为Flexible Box布局，是CSS3中一种强大的页面布局工具，旨在提供更为灵活、响应式的网页设计。自2009年由W3C提出以来，它已获得了所有主流浏览器的广泛支持，成为现代网页开发的标准。通过Flex布局，开发者能够轻松地创建复杂的、适应不同屏幕尺寸的界面。
在CSS中，启用Flex布局非常简单，只需将`display`属性设置为`flex`或`inline-flex`。一旦容器被设定为Flex容器，其所有子元素会自动成为Flex项目。容器拥有两个主要的轴线：主轴（main axis）和交叉轴（cross axis）。主轴是项目的默认排列方向，而交叉轴则与其垂直。主轴的起始和结束点分别被称为main start和main end，交叉轴的对应点则是cross start和cross end。
Flex布局的关键属性包括：
1. `flex-direction`：决定项目的排列方向。可选值有`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）和`column-reverse`（从下到上）。
2. `flex-wrap`：控制项目的换行方式。`nowrap`表示不换行，`wrap`表示换行且第一行在上方，`wrap-reverse`则让换行后的第一行在下方。
3. `flex-flow`：是`flex-direction`和`flex-wrap`的组合属性，用于简写这两个属性。
4. `justify-content`：控制项目在主轴上的对齐方式，包括`flex-start`（左对齐）、`flex-end`（右对齐）、`center`（居中）、`space-between`（两端对齐）和`space-around`（均匀分布）。
5. `align-items`：定义项目在交叉轴上的对齐方式，包括`flex-start`（顶对齐）、`flex-end`（底对齐）、`center`（中对齐）、`baseline`（基线对齐）和`stretch`（拉伸填充）。
6. `align-content`（仅在多行布局中有效）：与`align-items`类似，但作用于多根轴线，调整它们在交叉轴上的对齐。
7. `order`：定义项目的排列顺序，数值越小，排列越靠前。
8. `flex-grow`：设置项目在有多余空间时的放大比例。
9. `flex-shrink`：当空间不足时，项目缩小的比例，默认为1。
10. `flex-basis`：确定项目在分配多余空间前在主轴上的基本大小。
11. `flex`：一个简写属性，包含`flex-grow`、`flex-shrink`和`flex-basis`，如`flex: 1 1 auto`。
12. `align-self`：允许单个Flex项目自定义对其方式，覆盖父容器的`align-items`属性。
通过这些属性的组合和调整，开发者可以创建出各种灵活的布局模式，无论是简单的列表布局还是复杂的网格系统，Flex布局都能游刃有余地处理。在响应式设计中，Flex布局更是不可或缺的工具，因为它能确保网页在不同设备和屏幕尺寸下保持良好的视觉效果和用户体验。
