本文深入探讨了Flex布局的工作原理，详细介绍了如何通过设置父元素的flex-direction、justify-content、flex-wrap和align-items属性来控制子元素在主轴和侧轴上的位置与排列。此外，还讲解了子元素的flex属性、align-self和order属性，用于调整子元素的大小和排列顺序。通过这些属性，开发者可以实现灵活且响应式的网页布局设计。
flex布局原理
通过给父元素添加flex属性，来控制子元素的位置和排列
常见父元素属性
flex-direction
设置主轴方向，默认x
| 操作 | 代码 |
|---|---|
| 默认 | flex-direction:row |
| 反转 | flex-direction:row-reverse |
| 竖直 | flex-direction:column |
| 竖直反转 | flex-direction:column-reverse |
justify-content
设置主轴上子元素的排列方式
| 操作 | 代码 |
|---|---|
| 默认 | justify-content:flex-start |
| 贴右 | justify-content:flex-end |
| 居中 | justify-content:center |
| 均分 | justify-content:space-around |
| 贴边均分 | justify-content:space-between |
flex-wrap
设置子元素是否换行
| 操作 | 代码 |
|---|---|
| 默认不换行 | flex-wrap:nowrap |
| 换行 | flex-wrap:wrap |
align-content
侧轴上子元素的排列方式（多行）
对单行无效
| 操作 | 代码 |
|---|---|
| 默认 | align-content:flex-start |
| 贴下 | align-content:flex-end |
| 居中 | align-content:center |
| 上下均分 | align-content:space-around |
| 上下贴边 | align-content:space-between |
align-items
侧轴上子元素的排列方式（单行）默认为y
| 操作 | 代码 |
|---|---|
| 默认 | align-items:flex-start |
| 贴下 | align-items:flex-end |
| 居中 | align-items:center |
| 拉伸,子盒子不要有高度 | align-items:stretch |
flex-flow
flex-direction和flex-wrap的复合属性
| 操作 | 代码 |
|---|---|
| 主轴列，换行 | flex-flow:column wrap |
常见子元素属性
flex
子元素分配剩余空间，占多少份
flex:1
flex:20% //多用于换行
align-self
控制子项在侧轴的排列方式
自己下来 align-self:flex-end;
order
定义项目的排列顺序
order:-1
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
