flex布局父项属性
- flex-direction：设置主轴的方向
【注意】主轴和侧轴方向会变化的，主要看flex-direction设置的值
| 属性值 | 说明 |
|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
- justify-content：设置主轴上子元素的排列方式
| 属性值 | 说明 |
|---|
| flex-start | 默认值 从头部开始 如果主轴为x轴，则从左往右 |
| flex-end | 从尾部开始 |
| center | 在主轴居中对齐（如果主轴为x轴，则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，在平分剩余空间 |
- flex-warp：设置子元素是否换行 默认情况下都排在一行上
- align-content：设置侧轴上子元素的排列方式（多行）
- 设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况，在单行情况下没有效果
| 属性值 | 说明 |
|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，在平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
- align-items：设置侧轴上子元素的排列方式（单行）
| 属性值 | 说明 |
|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸（默认） |
- flex-flow：复合属性，相当于设置了flex-direction和flex-warp
*flex-flow：row warp；
flex布局子项常用属性
- flex-basis：用于设置子项的占用空间，如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值
- flex-grow：瓜分剩余空间
- flex-shrink：压缩自身空间
- align-self：控制子项自己在侧轴上的排列方式
- align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
span:ntn-child(2){
align-self:flex-end;
}
- order定义项目的排列顺序
扫一扫
871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
