理解 CSS Flexbox - 附视觉示例。

Flexbox 让您可以完全控制各个框的对齐方式、方向、顺序和大小。它使构建现代网页布局变得非常容易。

本文将探讨最常用的 Flexbox 属性。

容器和物品

“Flex”是CSS显示属性的值之一。

.container {
  display: flex;
}

• 弹性容器：display 属性设置为 flex 的元素将成为弹性容器。
• 弹性项目：容器的所有直接子元素都成为弹性项目。

Flex容器属性

1. 内容两端对齐：项目的水平对齐。

Justify-Content 的值。

• flex-start：将项目对齐到行的起始位置
• flex-end：将项目对齐到行尾
• 居中：将项目居中对齐到行中心。
• 间距：弹性项目之间的间距
• 周围间距：弹性项目周围的间距

2. 对齐项目：项目的垂直对齐。

• Align-Items 的值与 justify-content 的值完全相同。
• 区别在于 Align-Items 垂直对齐项目，而 Justify-Content 水平对齐项目。

3. 弹性环绕：创建网格布局
当弹性项的行宽度超过弹性容器的宽度时，弹性项会溢出容器边缘。

Flex Wrap 有两个值：

• no-wrap：默认值。弹性布局元素会溢出页面。
• wrap：将弹性项目换行到下一行。

4. 弹性方向：行或列
默认情况下，弹性容器会将其弹性项目排列成一行。您可以使用 flex-direction 属性更改弹性容器的方向。

它有四个价值：

• 排
• 行反转：反转行
• 柱子
• 列反转：反转列

当列的 flex-direction 设置为 true 时，justify-Content 和 Align-Items 的作用会发生变化。

弹性项目属性：自身对齐

Align-Self 与 align-items 类似，唯一的区别是 align-items 应用于 flex-container，而 align-self 应用于单个 flex-item。

• 弹性启动
• 柔性端
• 中心
• 拉紧

如果你喜欢这篇文章，不妨订阅我的电子报，我每周都会分享关于提升技能的精彩内容。

非常感谢您的阅读。