flex 布局详解，我是如何收割多家大厂 offer 的
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 上的对齐方式（一般是针对多行）
==================================================================================
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 如何扩展：
可以设置任意非负数字（正小数、正整数、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
flex-basis 用来设置 flex items 在 main axis 方向上的 base size
auto（默认值） =content：取决于内容本身的 size
决定 flex items 最终 base size 的因素，从优先级高到低
max-width \ max-height \ min-width \ min-height
flex-basis
width \ height
内容本身的 size
以下代码可以实现平分的效果：
.item {
flex-basis: 0;
flex-grow: 1;
}
还未添加个人签名 2021.03.18 加入
还未添加个人简介
评论