从单行到多行

flex-wrap

开启多行模式的开关

为了解决压缩和溢出的问题，我们需要允许子项换行

• nowrap（默认）：不换行，强行挤在同一行
• wrap：空间不足时，自动将子项移至新行，所有item不会被压缩
• wrap-reverse：与wrap类似，但新行会出现在已有行的上方

flex-wrap:nowrap;

align-content

align-content 是 CSS Flexbox 和 Grid 布局中的一个属性，用于在交叉轴（cross axis）方向上对多行（或多列）内容块进行整体分布对齐。

提示

align-conent生效需要满足如下条件

• flex-wrap的值为wrap或者wrap-reverse
• 容器内实际发生了换行（即至少存在两行）

值	含义	视觉说明
flex-start	各行（列）从交叉轴起点开始对齐	所有内容靠上（或左）
flex-end	各行（列）从交叉轴终点对齐	所有内容靠下（或右）
center	所有行（列）在交叉轴方向居中	内容整体垂直居中
space-between	首尾贴边，中间平均分布
space-around	每行两侧留等宽间距	两端半间距，中间全间距
space-evenly	每行之间与两端的间距完全相等	间距全等
stretch	默认值，自动拉伸每行高度以填满容器	行高自动拉满

strech不生效

如果flex item 高度固定，行高也固定，那么strech将不生效， 不会被拉伸，相当于 flex-start 效果