前端 flex布局
容器属性
1父容器
| 属性 | 值 | ||||
|---|---|---|---|---|---|
| display: | flex | ||||
| justify-content主轴: | flex-start | flex-end | center | space-around | space-between |
| align-items副轴: 没有两端对齐 |
flex-start | flex-end | center | baseline | stretch默认 |
2 进阶
| 属性 | 值 | |||
|---|---|---|---|---|
| flex-direction轴: | row默认 | row-reverse | column | column-reverse |
| flex-wrap换行: | no-wrap默认 | wrap | wrap-reverse | |
| flex-flow上两个的结合: | row wrap | |||
| align-content多行副轴: | flex-start默认 flex-end |
center | space-around space-between |
stretch |
项目属性
| 属性 | 值 |
|---|---|
| flex-grow: | 放大比例,默认为0，即如果存在剩余空间，也不放大。 |
| flex-shrink: | 缩小比例,默认为1，即如果空间不足，该项目将缩小 |
| flex-basis: | 原始尺寸的宽 px或auto默认 |
| flex: | flex-grow flex-shrink flex-basis的简写，默认值为 0 1 auto。 后两个属性可选。比如flex:1 |
| order: | 12345 |
| align-self副轴: | flex-start / flex-end / center / baseline / stretch / auto默认与父同 |
