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，可能会导致无法缩小。

代码之书