flex布局父项常见属性
1.flex布局原理：
通过给父盒子添加flex属性，来控制盒子的位置和排列方式。
| 属性 | 说明 |
|---|---|
| flex-direction | 设置主轴方向 |
| justify-content | 设置主轴上的子元素排列方式 |
| flex-wrap | 设置子元素是否换行 |
| align-content | 设置侧轴上的子元素排列方式（单行） |
| align-items | 设置侧轴上的子元素排列方式（多行） |
| flex-flow | 同时设置flex-direction和flex-wrap |
2.flex-direction 设置主轴方向
（1）主轴和侧轴
在flex布局中，分为主轴和侧轴两个方向
默认主轴方向是x轴方向，水平向右
默认侧轴方向是y轴方向，水平向左
（2）属性值
flex-direction属性决定主轴的方向
主轴和侧轴是会变化的，flex-direction设置谁为主轴，剩下的就是侧轴
子元素跟着主轴排列
| 属性值 | 说明 |
|---|---|
| row | 默认 从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
3.justify-content 设置主轴上的子元素排列方式
使用这个属性前确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认 从头部开始，如果主轴是x轴，从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（主轴是x轴则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
4.flex-wrap设置子元素是否换行
| 属性值 | 说明 |
|---|---|
| nowrap | 默认 不换行 |
| wrap | 换行 |
5.align-items 设置侧轴上的子元素排列方式（单行）
| 属性值 | 说明 |
|---|---|
| flex-start | 默认 从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| strech | 拉伸（子盒子不带高度，否则无效） |
6.align-content 设置侧轴上的子元素排列方式（多行）
只能用于子项出现换行的情况
| 属性值 | 说明 |
|---|---|
| flex-start | 默认 在侧轴头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| strech | 设置子项元素高度 平分父元素高度 |
温馨提示：在书写flex样式的时候不要忘记转换语句display: flex;
每日所学笔记会持续更新，前端的兄弟姐妹们，一起加油！
扫一扫
9171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
