弹性布局
发布时间 2023-05-07 17:16:24作者: web格调
弹性布局
| 属性 |
说明 |
| display |
指定html元素设置flex(弹性布局) |
| flex-direction |
指定弹性盒子排列方式横/竖 |
| flex-wrap |
控制是否换行 |
| flex-flow |
flex-direction 和 flex-wrap 两个属性的简写 |
| justify-content |
主轴的排列顺序 |
| align-items |
副轴的排列顺序 |
| align-content |
设置行对齐，但不是设置元素对齐 |
| order |
设置元素 的排列顺序 |
| flex |
设置子元素弹性盒子占比 |
容器属性公共
| 值 |
说明 |
| initial |
设置为默认属性 |
| inherit |
从父元素继承属性值 |
flex-direction
| 值 |
说明 |
| row |
主轴水平从左到右（默认值） |
| row-reverse |
主轴水平从右到左 |
| column |
主轴垂直从上到下 |
| column-reverse |
主轴垂直从下到上 |
flex-wrap
| 值 |
说明 |
| onwrap |
超出压缩元素不会换行 |
| wrap |
设置超出换行 |
| weap-reverse |
超出换行，换行的内容顺序相反 |
justify-content
| 值 |
说明 |
| flex-start |
左对齐 |
| flex-end |
右对齐 |
| center |
居中 |
| space-between |
两端对齐 |
| space-arpund |
两个项目良策的间隔相等 |
align-items
| 值 |
说明 |
| stretch` |
被拉伸以适合容器 |
| center |
项目在容器的中央 |
| flex-start |
项目在容器的顶部 |
| flex-end |
项目在容器的底部 |
| baseline |
项目与容器的基线对齐 |
align-content
| 值 |
说明 |
| stretch |
占据剩余空间 |
| center |
项目在容器在内容居中排列 |
| flex-start |
项目在容器的顶部排列 |
| flex-end |
项目与在容器的底部排列 |
| space-between |
多行第一行在顶部最后一行在底部 |
| space-around |
多行每行的间距相等 |