photo.jpg
FLEX布局
一种新的布局方式，flex布局
- flex布局与方向无关
- flex布局可以实现空间自动分配、自动对齐。
- flex适用于简单的线性布局。
flex container:
| 属性 | 作用 |
|---|---|
| flex-direction | 方向 |
| flex-wrap | 换行 |
| flex-flow | 上面两个简写 |
| justify-content | 主轴方向对齐方式 （center，space-between，space-around，flex-end，flex-start） |
| align-items | 侧轴对齐方式 （strech，flex-start，flex-end，center ） |
| align-content | 多行、列内容对齐方式 |
flex item:
| 属性 | 作用 |
|---|---|
| flex-grow | 增长比例 |
| flex-shrink | 收缩比例 |
| flex-basis | 默认大小 |
| flex | 上面三个缩写 |
| order | 顺序（代替双飞翼） |
| slign-self | 自身的对齐方式 |
