CSS Flexbox 布局与定位及居中-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox？

Flexbox 是 CSS3 中的一个模块，用于在容器中对元素进行排列、对齐和分配空间。Flexbox 可以使得网站的布局系统更加灵活、易于调整，可以应对不同屏幕尺寸和设备。

Flexbox 布局通过设置容器的属性来控制子元素的排列方式。以下是最常用的 3 个属性：

该属性用于设置主轴的方向，可以取值为 row（默认值）、row-reverse、column、column-reverse。例如：

.container {
  display: flex;
  flex-direction: row-reverse;
}

该属性用于设置主轴上的对齐方式，可以取值为 flex-start（默认值）、flex-end、center、space-between、space-around。例如：

.container {
  display: flex;
  justify-content: center;
}

该属性用于设置交叉轴上的对齐方式，可以取值为 stretch（默认值）、flex-start、flex-end、center、baseline。例如：

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

更多的 Flexbox 属性可以参考 Flexbox 完全指南。

灵活的定位功能是 Flexbox 的一大特点。我们可以通过设置子元素的属性来实现不同的定位方式。以下是最常用的 3 个属性：

该属性用于单独设置某个子元素的对齐方式，可以取值和 align-items 相同。例如：

.container {
  display: flex;
}
.item {
  align-self: center;
}

该属性用于设置子元素在剩余空间中占据的比例，取值为非负整数。默认值为 0。例如：

.container {
  display: flex;
}
.item {
  flex-grow: 1;
}

该属性用于设置子元素在容器中的排列顺序，数值越小越靠前，默认值为 0。例如：

.container {
  display: flex;
}
.second {
  order: -1;
}

Flexbox 布局还可以实现各种居中方式。以下是最常用的 3 种方式：

将容器的 justify-content 属性设置为 center 即可实现水平居中。例如：

.container {
  display: flex;
  justify-content: center;
}

将容器的 align-items 属性设置为 center 即可实现垂直居中。例如：

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

将容器的 justify-content 和 align-items 属性均设置为 center 即可实现水平垂直居中。例如：

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

Flexbox 布局是一种灵活、强大而又易于掌握的布局方式，可以应对各种网站布局需求。本文介绍了 Flexbox 的常用属性及用法，以及如何利用 Flexbox 完成元素的定位和居中。希望本文能为读者提供有价值的知识和指导。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646d067d968c7c53b0bddd40