• flex-wrap

• justify-content

• align-items

• align-content

应用在 flex items 上的 CSS 属性：

• flex

• flex-grow

• flex-basis

• flex-shrink

• order

• align-self

 flex container 相关属性

======================================================================================

看到 align 属性就是针对 corss axis；

后面跟 items 就是针对单个 item；后面跟 content 就是针对整个模块。

 flex 模块布局

---

 flex-direction：设置 main axis 的方向

---

flex items 默认都是沿着 main axis（主轴） 从 main start 开始往 main end 方向排布

flex-direction 决定 了 main axis 的方向，有 4 个取值：

• row（默认值）

• row-reverse

• column

• column-reverse

 justify-content：设置 flex items 在 main axis 对齐方式

---

justify-content 决定了 flex items 在 main axis 上的对齐方式

• flex-start（默认值）：与 main start 对齐

• flex-end：与 main end 对齐

• center：居中对其

• space-between：

flex items 之间的距离相等

与 main start、main end 两端对齐

• space-evenly：

flex items 之间的距离相等

flex items 与 main start，main end 之间的距离等于 flex items 之间的距离

• space-around：

flex items 之前的距离相等

flex items 与 main start，main end 之间的距离是 flex items 之间距离的一半

 align-items：设置 flex items 在 cross axis 对齐方式

---

cross axis（交叉轴），必定与 main axis（主轴）垂直，见  flex模型布局

align-items 决定了 flex items 在 cross axis 上的对齐方式

• stretch（默认值）：当 flex items 在 cross axis 方向上的 size 为 auto 时，会自动拉伸至填充

• flex-start：与 cross start 对齐

• flex-end：与 cross end 对齐

• center：居中对齐

• baseline：与基准线对齐

 flex-wrap：设置 flex container 单行还是多行

---

flex-wrap 决定了 flex container 是单行还是多行

• nowrap（默认）：单行

• wrap：多行

• wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

 flex-flow：简写属性 (flex-direction || flex-wrap)

---

flex-flow 是 flex-direction || flex-wrap 的简写

• flex-flow：column wrap 等价于：

flex-direction：column

flex-wrap：wrap

• flex-flow：row-reverse 等价于：

flex-direction：row-reverse

flex-wrap：nowrap

• flex-flow：wrap 等价于：

flex-direction：row

flex-wrap：wrap

 align-content：多行 flex items 在 cross axis 上的对齐方式

---

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与  justify-content 类似

• stretch（默认值）：与 align-items 的 stretch 类似

• flex-start：与 cross start 对齐

• flex-end：与 cross end 对齐

• space-between：

flex items 之间的距离相等

与 cross start，cross end 两端对齐

• space-around：

flex items 之间的距离相等

flex items 与 cross start，cross end 之间的距离是 flex items 之间距离的一半

• space-evenly：

flex items 之间的距离相等

flex items 与 cross start，cross end 之间的距离等于 flex items 之间的距离

 总结

---

• flex-flow 是 flex-direction || flex-wrap 的简写

• flex-direction 设置主轴（main axis）的方向

• flex-wrap 设置是否能换行

• justify-content 设置 flex items 在 main axis 上的对齐方式

• align-items 设置 flex items 在 cross axis 上的对齐方式（一般是针对单行）

• align-content 设置 flex items 在 cross axis 上的对齐方式（一般是针对多行）

 flex items 相关属性

==================================================================================

 order：决定 flex items 的排布顺序

---

order 决定了 flex items 的排布顺序

• 可以设置任意整数（正整数、负整数、0），值越小就越排在前面

• 默认值是0

 align-self：覆盖 flex container 设置的 align-items

---

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

• auto（默认值）：遵从 flex container 的 align-items 设置

• stretch，flex-start，flex-end，center，baseline，效果跟  align-items 一致

 flex-grow：决定了 flex items 如何拓展

---

flex-grow 决定了 flex items 如何扩展：

• 可以设置任意非负数字（正小数、正整数、0），默认值是 0

• 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为：

• flex container 的剩余 size * flex-grow / sum（按比例分）

如果所有 flex items 的 flex-grow 总和不超过 1，每个 flex item 扩展的 size 为：

• flex container 的剩余 size * flex-grow（直接计算）

flex items 扩展后的最终 size 不能超过 max-width 或 max-height

 flex-shrink：决定了 flex items 如何收缩

---

flex-shrink：决定了 flex items 如何收缩

• 可以设置任意非负数字（正小数、正整数、0），默认值是 0

• 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

每个 flex items 收缩的 size 为

• flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

收缩比例 = flex-shrink * flex items 的 base size

base size 就是 flex items 放入 flex container 之前的 size

flex items 收缩后的最终 size 不能小于 min-width 或 min-height

 flex-basic：设置 flex items 在 main axis 上的 base size

---

最后

分享一些系统的面试题，大家可以拿去刷一刷，准备面试涨薪。

这些面试题相对应的技术点：

• JVM
• MySQL
• Mybatis
• MongoDB
• Redis
• Spring
• Spring boot
• Spring cloud
• Kafka
• RabbitMQ
• Nginx
• …

大类就是：

• Java基础
• 数据结构与算法
• 并发编程
• 数据库
• 设计模式
• 微服务
• 消息中间件

本文已被 CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录