flex 基础

flex

1. 术语

1. 容器: 具有’display:flex’属性元素
2. 项目: flex 容器的”子元素”
3. 主轴: 项目排列的轴线
4. 交叉轴: 与主轴垂直的轴线

2. 容器属性

序号 属性 描述
1 ‘flex-flow’ 主轴方向与换行方式
2 ‘justify-content’ 项目在主轴上的对齐方式
3 ‘align-items’ 项目在交叉轴上的对齐方式
4 ‘align-content’ 项目在多行容器中的对齐方式

3. 项目属性

序号 属性 描述
1 ‘flex’ 项目的缩放比例与基准宽度
2 ‘align-self’ 单个项目在交叉轴上的对齐方式
3 ‘order’ 项目在主轴上排列顺序