父容器属性(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 | 单个对齐 |
