Flexbox 知识拓展 ——Flexbox 新特性探究-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是一种强大的 CSS 布局模式，它对于构建灵活的、自适应的布局非常重要。虽然 Flexbox 已经存在了很多年了，但是随着 Web 技术的发展，它一直在不断地更新与完善，下面我们将会探究一些 Flexbox 的新特性。

align-self

在 Flexbox 中，父元素的 align-items 属性指定了所有子元素在交叉轴上的对齐方式，而 align-self 属性则用于覆盖默认的对齐方式，只针对某个子元素生效。

.container {
  display: flex;
  align-items: center;
}

.container div:nth-child(2) {
  align-self: flex-end;
}

在上面这个例子中，align-items 属性指定了容器中所有子元素在交叉轴上居中对齐，但是第二个子元素覆盖了这个默认的对齐方式，让自己在交叉轴上靠底部对齐。

在 Flexbox 中，子元素的排列顺序是按照它们在 HTML 中的位置来排序的，但是我们可以使用 order 属性改变它们的排序。

.container div {
  order: 2;
}

在上面这个例子中，给所有子元素设置了相同的 order 属性，使它们按照垂直方向的顺序重新排列。

默认情况下，Flexbox 中的子元素会在一行上水平排列，如果空间不够容纳所有的子元素，它们会挤在一块。但是我们可以使用 flex-wrap 属性让它们在多行上排列。

.container {
  display: flex;
  flex-wrap: wrap;
}

在上面这个例子中，设置了容器的 flex-wrap 属性为 wrap，让超出容器宽度的子元素自动换行。

在传统的布局中，我们通常会使用 margin 或者 padding 让元素之间产生间距。而在 Flexbox 中，我们可以使用 gap 属性来设置间距。

.container {
  display: flex;
  gap: 10px;
}

在上面这个例子中，设置容器的 gap 属性为 10px，让容器内的子元素之间都有一个 10px 的间距。

在 Flexbox 中，justify-content 属性用于设置所有子元素在主轴方向上的对齐方式。

.container {
  display: flex;
  justify-content: space-between;
}

在上面这个例子中，将容器的 justify-content 属性设置为 space-between，让容器内的子元素在主轴上分散对齐。

Flexbox 是一种强大的 CSS 布局模式，它的新特性让我们在实现自适应布局时更加方便。在使用 Flexbox 时，我们应该充分利用它的各种特性，以达到更好的效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a94edbadd4f0e0ff2accef