写给自己看的CSS Flexbox Layout Guide

父容器属性(dfja)

display flex-flow justify-content align-items

gap

• 不影响边缘
• 不需要 :last-child
• Grid / Flex 通用

gap: 16px;        /* 行列统一 */
gap:4px 8px       /* row-gap column gap */
row-gap: 12px;
column-gap: 20px;

flex container properties

属性	作用
display	启用 flex
flex-direction	主轴方向
flex-wrap	是否换行
flex-flow	direction + wrap
justify-content	主轴对齐
align-items	单行交叉轴对齐
align-content	多行交叉轴对齐
gap / row-gap / column-gap	子项间距

子项属性(fa)

flex align-self order

flex: 0 1 auto; /* 默认:grow + shrink + basis 简写 */

flex: 1;        /* = 1 1 0 */
flex: auto;     /* = 1 1 auto */
flex: none;     /* = 0 0 auto */

flex items properties

属性	作用
order	排列顺序
flex-grow	放大比例
flex-shrink	缩小比例
flex-basis	初始尺寸
flex	grow + shrink + basis 简写
align-self	单个对齐

Reference

css-tricks.com/snippets/cs...