一、flex container 和 flex items
🎄 1、开启了 Flex 布局的元素叫 flex container
🎄 2、flex container 里面的直接子元素叫做 flex items
🎄 3、若元素的 display 属性的值为 flex 或 inline-flex，则该元素是 flex container
🎄 4、display 属性值为 flex，则 flex container 以 block-level 形式存在
🎄 5、display 属性值为 inline-flex，则 flex container 以 inline-level 形式存在
二、用在 flex container 上的 CSS 属性
✏️ flex-direction
✏️ justify-content
✏️ align-items
✏️ flex-wrap
✏️ flex-flow
✏️ align-content
(1) flex-direction
- flex-items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布
flex-direction 决定了 main axis 的方向（有四个取值）：
① row（默认）
② row-reverse
③ column
④ column-reverse
(2) justify-content
justify-content 决定了 flex-items 在 main axis 上的对齐方式
① flex-start（默认值）：与 main start 对齐
② flex-end：与 main end 对齐
③ center：沿着主轴居中 对齐
④ space-between：1️⃣ flex items 之间的距离相等；2️⃣ 与 main start、main end 两端对齐
⑤ space-evenly：1️⃣ flex items 之间的距离相等；2️⃣ flex items 与 main start、main end 之间的距离等于 flex items 之间的距离
⑥ space-around：1️⃣ flex items 之间的距离相等；2️⃣ flex items 与 main start、main end 之间的距离等于 flex items 之间的距离的一半
(3) align-items
align-items 决定了 flex-items 在 cross axis（交叉轴） 上的对齐方式
cross axis（交叉轴）的方向有两种：① 向下；② 向右
① flex-start：与 cross start 对齐
② flex-end：与 cross end 对齐
③ center：在 cross end 上居中对齐
④ baseline：与基准线对齐
⑤ stretch（默认）：当 flex items 在 cross axis 方向的 size 为 auto（不固定） 时，会自动拉伸至填充 flex container
📌 size：① 假如 cross axis 向下，size 指 height；② 假如 cross axis 向右，size 指 width
(4) flex-wrap
flex-wrap 决定 flex-container 是单行还是多行
① nowrap：单行
② wrap：多行【个人理解：朝着交叉轴的方向换行】
③ wrap-reverse：多行（对比 wrap，cross start 和 cross end 相反）【个人理解：朝着交叉轴的反方向换行】
(5) flex-flow
flex-flow 是 flex-direction 或 flex-wrap 的简写【这两个属性可以只出现一个，可以只是一种属性的简写】
下面的两种写法的作用是一样的：
#root-box {
flex-flow: column wrap;
}
#root-box2 {
flex-direction: column;
flex-wrap: wrap;
}
下面的两种写法的作用是一样的：
#root-box {
flex-flow: row-reverse;
}
#root-box2 {
flex-direction: row-reverse;
flex-wrap: nowrap;
}
下面的两种写法的作用是一样的：
#root-box {
flex-flow: wrap;
}
#root-box2 {
flex-direction: row;
flex-wrap: wrap;
}
(6) align-content
align-content 决定了多行 flex-items 在 cross axis（交叉轴） 上的对齐方式【用法与 justify-content 类似】
① flex-start：与 cross start 对齐
② flex-end：与 cross end 对齐
③ center：沿着 cross axis（交叉轴） 居中对齐
④ stretch：与 align-items 的 stretch 类似
⑤ space-between：1️⃣ flex items 之间的距离相等；2️⃣ 与 cross start、cross end 两端对齐
⑥ space-around：1️⃣ flex items 之间的距离相等；2️⃣ flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离的一半
⑦ ⑤ space-evenly：1️⃣ flex items 之间的距离相等；2️⃣ flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离
🎄 单行用 align-items
🎄 多行用 align-content
三、用在 flex items 上的 CSS 属性
✏️ order
✏️ align-self
✏️ flex-grow
✏️ flex-shrink
✏️ flex-basis
✏️ flex
(1) order（顺序）
order 决定 flex items 的排布顺序
🎄 可设置任意整数（正整数、负整数、0）
🎄 值越小排在越前面
🎄 默认值是 0
🎄 order 值一样的时候按照渲染顺序排布
(2) align-self
flex items 可通过 align-self 覆盖 flex container 中设置的 align-items
🎄 默认值是 auto【遵从 flex container 的 align-items 设置】
🎄 属性：① stretch、② flex-start、③ flex-end、④ center、⑤ baseline
🎄 效果和 align-items 差不多
(3) flex-grow
- flex-grow 决定 flex items 如何扩展
🍀 当 flex container 在 main axis 方向上有剩余 size（ 宽度或高度 ） 的时候，flex-grow 属性才有效
🍀 取值：可设置任意非负数字（正小数、正整数、0）【 默认是 0 】
① 如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为 'flex container 剩余 size' * (flex-grow / sum)
② 如果所有 flex items 的 flex-grow 总和 sum 不超过 1，每个 flex item 扩展的 size 为 'flex container 剩余 size' * flex-grow
🍀 flex items 扩展后的最终 size 不能超过 max-width 或 max-height
(4) flex-shrink
- flex-shrink 决定 flex items 如何收缩
🍀 当 flex items 在 main axis 方向上超过 flex container 的 size 的时候，flex-shrink 属性才有效
🍀 取值：可设置任意非负数字（正小数、正整数、0）【 默认是 1 】
- 收缩比例：
flex-shrink * (item 的 size) - size 是 width 或 height
① 收缩比例：flex-shrink * item 的 基础 size 【基础 size：flex item 放入 flex container 之前的 size】
② 每个 flex item 收缩的 size 为：
flex items 超出 flex container 的 size*（收缩比例 / 所有 flex items 的收缩比例之和）
③ flex items 收缩的最终 size 不能小于 min-width 或 min-height
(5) flex-basis
flex-basis 用于设置 flex items 在 main axis 上的 base size
① auto（默认值）：取决于内容本身的 size
② content：取决于内容本身的 size
决定 flex items 最终 base size 的因素，优先级从高到低为：
1️⃣ max-width、max-height、min-width、min-height
2️⃣ flex-basis
3️⃣ width、height
4️⃣ 内容本身的 size
.son {
/* 平分 */
flex-basis: 0; /* flex items 的 size 是 0 */
flex-grow: 1; /* 每个 flex item 的扩展比例是一样的 */
}
文章来源：https://www.toymoban.com/news/detail-443919.html
(6) flex
- flex 属性是 flex-grow、flex-shrink（可有可无）、flex-basic 的简写
下面3种写法都是平分布局：文章来源地址https://www.toymoban.com/news/detail-443919.html
.son {
/* flex item 平分布局 */
flex: 1;
}
.son {
flex-grow: 1;
flex-basis: 0;
}
.son {
flex: 1 0;
}
- 默认值：
0 1 auto- auto:
0 0 auto
到了这里，关于【前端】1、flex 布局详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
