> 时尚
前端flex经典面试(前端flex是什么意思)
导语:前端面试题之如何理解flexbox(下)
上期讲了justify-content是控制子集在主轴排列,这期我们来讲控制侧轴排列的属性。align-items和align-content。
控制侧轴排列我们一般分两种情况讨论:子集是单行和是多行
单行和多行两种情况
先说单行排列。我们用align-items来控制。
它有三个常用属性值flex-start/center/flex-end.
flex-start
center
flex-end
接着来说多行排列,我们用align-content来控制。它有五个常用的属性值flex-start/center/flex-end/space-around/space-between。
1.flex-start
flex-start
2.center
center
3.flex-end
flex-end
4.space-around
space-around
5.space-between
spance-between
给大家强调几点
1. align-items和align-content 是分别用在子集是单行和多行的,如果用错,是没有效果的。
2. 使用时 ,一定先分清主轴和侧轴的方向。
3. 这些属性都是写在父级上的
好了,flexbox就先和大家分享到这里,有疑问可以评论和我交流哦。
学前端,就选锐盈课堂
本文内容由小媛整理编辑!