flex-direction 方向布局

• 决定主轴的方向
• row 默认是沿着 主轴 的 开始位置 往 结束位置排布(从左到右)
• row-reverse 反向(从右到左)
• column (从上到下)
• column-reverse 反向(从下到上)

justify-content 主轴对齐

align-items 交叉轴对齐

• 决定flex-items 在 container 交叉轴的对齐方式
• normal 默认值,items没有高度的时候：cross size 改为auto,也就是高度直接撑开夫级高度
• flex-start 顶部对齐
• flex-end 底部对齐
• center 居中对齐
• baseline 基数对齐
  • 根据第一个item的文字居中对齐··

flex-wrap 切换[单 多行]

• 决定flex-items在flex-container,宽度超出的时候一行还是多行
• nowrap 默认值,不换行,宽度超出的时候回挤压
• wrap 多行
• wrap-reverse 反向

• 但有多行的时候,决定items的对齐方式
• stretch 默认值,拉升没啥用吧~
• flex-start 顶部对齐
• flex-end 底部对齐
• center 居中对齐
• space-between 分散对齐,上下贴着
• space-evenly 分散对齐,上中下平均
• space-around 分散对齐,上下是中间的一半

order 排序顺序

• 数值：正整数/负整数/0，数值越小越靠前
• 默认值0

flex-grow 成长宽度

• 总和大于 1，就会等分
• 总和小于 1，容器是占不满的！
• 最终宽度不能超过 max-width 和 max-height

flex-shrink 成长缩小

• 1 默认情况下就是收缩的
• 总和大于 1 会伸开
• 总和小于 1 会收缩
• 最小不能小于 min-width 和 min-height