上次内容我们已近简单介绍过Flex布局及他的一些基本属性,今天在昨天的基础上,让我们再深入了解一下吧!
1、水平垂直居中
justify-content: center 让子盒子item在水平方向居中
align-items: center 让子盒子item在垂直交叉轴方向居中
想要实现水平垂直居中,首先要知道到底是以谁为基准,也就是说要在哪个里面实现垂直居中
这是让粉色盒子在红色边框的盒子中水平居中,所以红色边框盒子作为基准,设置属性值。
当我想要红色边框的盒子也在页面的显示水平垂直居中,那么现在浏览器就作为了基准,那么我们就要在body中设置属性值。
☆要记得给body设置高度
2、align-content 定义了多根轴线的对齐方式
如果项目只有一根轴线,该属性不起作用。
flex-start | 与交叉轴的起点对齐 |
flex-end | 与交叉轴的终点对齐 |
center | 与交叉轴的中点对齐 |
space-between | 与交叉轴两端对齐,轴线之间的间隔平均分布 |
space-around | 每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍 |
stretch | 子元素没有设置高度或者高度为auto,轴线占满整个交叉轴 |
① flex-start
②flex-end
③center
④ space-between
⑤space-around
⑥ stretch
☆以上我们学习的属性都是在父元素上设置,下面要学习的属性都设置在子元素item上。
一、项目元素 item 的属性
1、order 排序
order 定义项目排列顺序,默认值为0,数值越小,排列越靠前
当我想让排在第三的“盒子3”往前排列,那么我就在他的元素里加上order: -1;
2、flex-grow 长大
-
在容器主轴上存在剩余空间时,
flex-grow
才有意义 - 该属性的值,称为放大因子
值 描述 0 默认为0,即如果存在剩余空间,也不放大
1
把剩余空间充满
① flex-grow:0
② flex-grow:1
3、flex-shrinik: 缩小
值 | 说明 |
1 | 默认为1,表示被压缩 |
0 | 表示不被压缩,保持设置的尺寸 |
① flex-shrinik:0
.item:nth-of-type(2){flex-shrinik:0} 表示第二个项目不被压缩,保持设置的尺寸
只有第二个项目保持了原来的宽度400px,第一个和第三个都默认为1,被缩小
②如果每个项目都设置flex-shrink: 0,将会超出父元素宽度
4、align-self
- 该属性可覆盖容器的
align-items
, 用以自定义某个项目的对齐方式
☆在多根轴线下设置无效
值 | 说明 |
flex-start | 与交叉轴起始线对齐 |
flex-end | 与交叉轴终止线对齐 |
center | 与交叉轴中间线对齐: 居中对齐 |
stretch | 在交叉轴方向上拉伸 |
① flex-start
.item:nth-of-type(3){align-self:flex-start}
②flex- end
.item:nth-of-type(3){align-self:flex-end}
③center
.item:nth-of-type(3){align-self:center}
④stretch
.item:nth-of-type(3){align-self:stretch}
5、 flex-basis
flex-basis优先级比width高,同时设置,会展示flex-basis的高度
如果一行排列不下,还是会被压缩宽度,除非设置flex-shrink: 0
6、flex是复合属性,由:flex-grow flex-shrink flex-basis 组成
默认值为flex(0 1 auto)后两个属性可选,
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。