Flex弹性布局知识点总结

弹性布局（Flexbox，Flexible Box Layout）是 CSS3 中提供的一种用于在容器中有效分配空间并对齐内容的布局方式，特别适用于一维（单行或单列）布局。下面是弹性布局的系统总结，方便你快速掌握与查阅。

一、基本概念

1. 启用弹性布局

display: flex;      /* 块级弹性容器 */
display: inline-flex; /* 行内弹性容器 */

2. 术语解释

容器（container）：设置了 display: flex 的元素。
项目（items）：容器中的直接子元素。
主轴（main axis）：项目排列的方向。
交叉轴（cross axis）：与主轴垂直的方向。

二、容器属性

| 属性名             | 作用                                | 常用值                               | 
|-------------------|------------------------------------|--------------------------------------| 
| `flex-direction`  | 设置主轴方向（项目排列方向） | `row`（默认, 横向），`row-reverse`，`column`，`column-reverse` | 
| `flex-wrap`       | 是否换行     | `nowrap`（默认），`wrap`，`wrap-reverse`                     | 
| `flex-flow`       | `flex-direction` 和 `flex-wrap` 的简写 | 如：`row wrap`                       | 
| `justify-content` | 主轴对齐方式 | `flex-start`，`flex-end`，`center`，`space-between`，`space-around`，`space-evenly` | 
| `align-items`     | 交叉轴对齐方式（单行） | `stretch`（默认），`flex-start`，`flex-end`，`center`，`baseline`            | 
| `align-content`   | 交叉轴对齐方式（多行） | 同 `align-items`，但针对多行容器                                             |

| 属性名 | 作用 | 常用值 | |---------------|----------------------------------------------|--------------------------| | order | 控制项目排列顺序，数值越小越靠前 | 整数，默认 0 | | flex-grow | 项目放大比例 | 默认 0（不放大） | | flex-shrink | 项目缩小比例 | 默认 1（可缩小） | | flex-basis | 项目初始大小（主轴方向） | 可设置为像素、百分比、auto | | flex | flex-grow、flex-shrink 和 flex-basis 的简写 | 如：1 0 auto，0 1 100px | | align-self | 单独项目在交叉轴的对齐方式 | 覆盖 align-items，值同上 |

四、常见布局示例

水平居中

display: flex;
justify-content: center;
align-items: center;

多列等宽布局

.container {
  display: flex;
}
.item {
  flex: 1;
}

两端对齐，中间自适应

<div class="container">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>

.container {
  display: flex;
}
.center {
  flex: 1;
}

五、常见问题

flex: 1 是 flex: 1 1 0% 的简写，意味着项目可以放大、缩小，初始宽度为 0。
子元素宽度被 flex-basis 控制优先于 width。
项目默认 min-width 不是 0，可能会导致无法缩小。

代码之书