【CSS】还不熟练 Flex布局?这次一文搞定 Flex

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

强大的 Flex 布局

Flex 布局不论在 PC端布局还是在移动端布局中都是一种非常流行的解决方案.

首先要理清楚 整明白 flex 的各个 属性/ 属性值, 及其 用法/ 效果!

1. justify-content 横向对齐( X 轴 )
2. align-items 纵向对齐 ( Y 轴 )
3. flex-direction 元素排列方向
4. order 元素顺序
5. align-self 控制单个元素对齐
6. flex-wrap 分散元素(换行)
7. flex-flow 简写(合并)flex-direction 和 flex-wrap
8. align-content行之间的距离问题

1. justify-content 横向对齐

justify-content 将 flex元素与主轴(x轴)对齐: 用于调整子元素 横向排列 的问题:

justify-content 这个 CSS 属性可以水平对齐元素，并且接受以下几个参数：

• flex-start: 元素和容器的左端对齐。(default)
• flex-end: 元素和容器的右端对齐。
• center: 元素在容器里居中。
• space-around: 元素周围保持相等的距离。
• space-between: 元素之间保持相等的距离。 相对于 space-around 元素之间的距离会较大一些, 而元素到容器的距离较小一些.
• space-evenly:

2. align-items 纵向对齐

align-items 在交叉轴(y轴)上对齐多个元素, 即调整子元素在 纵向排列 的问题.

align-items 这个 CSS 属性纵向对齐元素并且可选以下几个值：

• flex-start: 元素与容器的顶部对齐。
• flex-end: 元素与容器的底部对齐。
• center: 元素纵向居中。
• baseline: 元素在容器的基线位置显示。
• stretch: 元素被拉伸以填满整个容器。(default)

3. flex-direction 元素排列方向

要调整元素的排列方向, 就是从前往后排列还是反过来排列, 我们可以用 flex-direction 属性。

这个 CSS 属性定义了元素在容器里摆放的方向，并且接受这些值：

• row: 元素摆放的方向和文字方向一致。 (default)
• row-reverse: 元素摆放的方向和文字方向相反。
• column: 元素从上放到下。
• column-reverse: 元素从下放到上。

注意: 当你调转行或列的方向后, justify-content 的flex-start 和 flex-end 对应的方向也被调转了。

注意: 当 flex 以列为方向时, justify-content 控制纵向对齐，align-items 控制横向对齐。

4. order 元素顺序

order 决定 flex元素的顺序.

有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的 order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

试着用 order 来调整元素的顺序。

5. align-self 控制单个元素对齐

另一个你可以使用的控制单个元素的属性是 align-self。这个属性接受和 align-items 一样的那些值。

• flex-start: 元素与容器的顶部对齐。
• flex-end: 元素与容器的底部对齐。
• center: 元素纵向居中。
• baseline: 元素在容器的基线位置显示。
• stretch: 元素被拉伸以填满整个容器。 (default)

6. flex-wrap 分散元素(换行)

定于flex元素必须在单行或自动换行成多行.

flex-wrap 属性把元素分散开来。这个属性接受这些值：

• nowrap: 所有的元素都在一行。 (default)
• wrap: 元素自动换成多行。
• wrap-reverse: 元素自动换成逆序的多行。

7. flex-flow 简写

flex-direction 和 flex-wrap 两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

举个例子: 你可以用 flex-flow: row wrap 去设置行并自动换行。

flex-flow: <flex-direction> <flex-wrap>;

8. align-content 行之间的距离问题

当交叉轴有多余空间时, 对齐容器的轴线.

你可以使用 align-content 来决定行与行之间隔多远。这个属性接受这些值：

• flex-start: 多行都集中在顶部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行与行之间保持相等距离。
• space-around: 每行的周围保持相等距离。
• stretch: 每一行都被拉伸以填满容器。 (default)

这可能有些容易混淆，但 align-content 决定行之间的间隔，而 align-items 决定元素整体在容器的什么位置。只有一行的时候 align-content 没有任何效果。

多加练习才能熟练掌握, 继而灵活运用

在线练习 Flex

官方支持 评论抽奖

欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送 100份掘金周边，抽奖详情见活动文章