flex-wrap
justify-content
align-items
align-content
应用在 flex items 上的 CSS 属性:
flex
flex-grow
flex-basis
flex-shrink
order
align-self
======================================================================================
看到 align 属性就是针对 corss axis;
后面跟 items 就是针对单个 item;后面跟 content 就是针对整个模块。
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 上的对齐方式(一般是针对多行)
==================================================================================
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 items 的 flex-grow 总和不超过 1,每个 flex item 扩展的 size 为:
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-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
分享一些系统的面试题,大家可以拿去刷一刷,准备面试涨薪。
这些面试题相对应的技术点:
大类就是: