CSS Flexbox 的 Flex 属性使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox

Flexbox 是一种 CSS 布局模式，它可以在更复杂的页面中实现更灵活的布局。Flexbox 布局可以使容器中的元素自动调整大小，并根据可用空间对齐它们。

在 Flexbox 中，容器中的每个元素被称为 Flex 项（Flex item），它们可以以任意数量和任意顺序出现，并使用 Flex 属性调整它们之间的空间关系。

Flex 属性指定了 Flex 项在主轴和交叉轴上的大小和位置。

Flex 属性包含以下三个子属性：

flex-grow 属性定义了 Flex 项在主轴方向上的增长系数。当容器中的可用空间增加时，Flex 项按比例分配额外的空间。默认值为 0，表示不允许 Flex 项增长。

例如，如果有一行上有三个 Flex 项，并且第一个项的 flex-grow 属性为 2，第二个项为 1，第三个项为 1，则可用空间将被分配为 2:1:1。

.flex-container {
  display: flex;
}

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

flex-shrink 属性定义了 Flex 项在主轴方向上的收缩系数。当容器中的可用空间减少时，Flex 项按比例收缩。默认值为 1，表示允许 Flex 项收缩。

例如，如果有一行上有三个 Flex 项，并且第一个项的 flex-shrink 属性为 1，第二个项为 2，第三个项为 3，则可用空间将被分配为 1:2:3。

.flex-container {
  display: flex;
}

.flex-item {
  flex-shrink: 2;
}

flex-basis 属性定义了 Flex 项在主轴方向上的初始大小。它可以使用像素、百分比或其他 CSS 单位进行指定。

.flex-container {
  display: flex;
}

.flex-item {
  flex-basis: 200px;
}

Flex 属性的组合用法可以使用更简洁的方式定义 Flex 项的大小和位置，使用的语法为：

flex: [flex-grow] [flex-shrink] [flex-basis];

例如，下面的代码将 Flex 项的 flex-grow 属性设置为 2，flex-shrink 属性设置为 1，flex-basis 属性设置为 50%：

.flex-item {
  flex: 2 1 50%;
}

Flexbox 的 Flex 属性可以帮助开发者控制 Flex 项在主轴和交叉轴上的大小和位置。组合使用 Flex 属性可以让布局更简洁明了。希望本文的介绍能对你掌握 Flexbox 的灵活布局有所帮助。

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