#容器属性
| 属性 | 值 | 说明 | |
|---|---|---|---|
display | flexinline-flex | 启用Flex容器 | |
flex-direction | rowrow-reversecolumncolumn-reverse | 设置主轴方向 | |
flex-wrap | nowrapwrapwrap-reverse | 设置换行行为 | |
flex-flow | row nowrapcolumn wrap... | direction + wrap的简写 | |
justify-content | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly | 主轴对齐 | |
align-items | flex-startflex-endcenterstretchbaseline | 交叉轴对齐 | |
align-content | flex-startflex-endcenterstretchspace-betweenspace-around | 多行交叉轴对齐 | |
gap | 10px1rem10px 20px | 项目间距 |
#项目属性
| 属性 | 值 | 说明 | |
|---|---|---|---|
order | 01-1... | 项目顺序 | |
flex-grow | 012... | 增长比例 | |
flex-shrink | 01... | 收缩比例 | |
flex-basis | auto0100px50% | 初始大小 | |
flex | 10 1 auto1 1 0... | grow shrink basis的简写 | |
align-self | autoflex-startflex-endcenterstretchbaseline | 单个项目交叉轴对齐 |
#常用模式
| 属性 | 值 | 说明 | |
|---|---|---|---|
居中对齐 | justify-content: centeralign-items: center | 完美居中 | |
两端对齐 | justify-content: space-between | 首尾两端分布 | |
均匀分布 | justify-content: space-evenly | 所有间距相等 | |
垂直布局 | flex-direction: column | 垂直方向布局 | |
自动换行 | flex-wrap: wrap | 溢出时自动换行 | |
等宽 | flex: 1 | 所有项目等宽 | |
固定 + 流动 | flex: 0 0 200pxflex: 1 | 侧边栏 + 主布局 |
#flex简写值
| 属性 | 值 | 说明 | |
|---|---|---|---|
flex: initial | = flex: 0 1 auto | 仅收缩，保持基础大小 | |
flex: auto | = flex: 1 1 auto | 可增长和收缩 | |
flex: none | = flex: 0 0 auto | 固定大小，不可伸缩 | |
flex: 1 | = flex: 1 1 0 | 均匀分配空间 |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.