搜索
写经验 领红包
 > 时尚

前端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就先和大家分享到这里,有疑问可以评论和我交流哦。

学前端,就选锐盈课堂

本文内容由小媛整理编辑!