Flexbox 常用属性汇总-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是一种强大的 CSS 布局模式，它允许我们在容器中创建灵活的、自适应的布局。在前端开发中，Flexbox 已经成为了一个非常重要的技术，它可以帮助我们快速实现响应式布局，并且可以轻松地管理 HTML 元素的位置、大小和间距。

在本文中，我们将介绍 Flexbox 的常用属性，包括容器属性和项目属性，同时也会提供一些实际的代码示例，帮助读者更好地理解和应用这些属性。

容器属性

容器属性是用于控制 Flexbox 容器的属性，它们可以影响所有容器中的项目。以下是一些常用的容器属性：

display 属性用于定义一个容器是 Flexbox 容器还是普通的块级容器。默认情况下，容器的 display 属性为 block，我们可以将其设置为 flex 来启用 Flexbox 布局。

.container {
  display: flex;
}

flex-direction 属性用于定义 Flexbox 容器中项目的排列方向。它有四个可选值：row、row-reverse、column 和 column-reverse，分别表示从左到右、从右到左、从上到下和从下到上排列。

.container {
  flex-direction: row;
}

justify-content 属性用于定义 Flexbox 容器中项目的水平对齐方式。它有五个可选值：flex-start、flex-end、center、space-between 和 space-around，分别表示左对齐、右对齐、居中对齐、两端对齐和间隔对齐。

.container {
  justify-content: center;
}

align-items 属性用于定义 Flexbox 容器中项目的垂直对齐方式。它有五个可选值：flex-start、flex-end、center、baseline 和 stretch，分别表示顶部对齐、底部对齐、居中对齐、基线对齐和拉伸对齐。

.container {
  align-items: center;
}

flex-wrap 属性用于定义 Flexbox 容器中项目的换行方式。它有三个可选值：nowrap、wrap 和 wrap-reverse，分别表示不换行、正常换行和反向换行。

.container {
  flex-wrap: wrap;
}

align-content 属性用于定义多行项目的对齐方式。它有五个可选值：flex-start、flex-end、center、space-between 和 space-around，分别表示顶部对齐、底部对齐、居中对齐、两端对齐和间隔对齐。

.container {
  align-content: center;
}

项目属性是用于控制 Flexbox 容器中每个项目的属性。以下是一些常用的项目属性：

order 属性用于定义项目的排列顺序。默认情况下，项目的 order 属性为 0，我们可以使用正整数或负整数来改变项目的排列顺序。

.item {
  order: 1;
}

flex-grow 属性用于定义项目的放大比例。默认情况下，项目的 flex-grow 属性为 0，表示不放大。如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。如果某个项目的 flex-grow 属性为 2，则它将获得的剩余空间是其他项目的两倍。

.item {
  flex-grow: 1;
}

flex-shrink 属性用于定义项目的缩小比例。默认情况下，项目的 flex-shrink 属性为 1，表示可以缩小。如果所有项目的 flex-shrink 属性都为 1，则它们将等分收缩空间。如果某个项目的 flex-shrink 属性为 0，则它不会缩小。

.item {
  flex-shrink: 1;
}

flex-basis 属性用于定义项目的基础大小。默认情况下，项目的 flex-basis 属性为 auto，表示使用项目的本身大小。如果我们将其设置为一个像素值或百分比值，则项目的大小将被限制在这个值内。

.item {
  flex-basis: 100px;
}

flex 属性是一个简写属性，用于同时定义 flex-grow、flex-shrink 和 flex-basis 三个属性。它的默认值为 0 1 auto，表示不放大、可以缩小和使用项目的本身大小。

.item {
  flex: 1;
}

align-self 属性用于定义单个项目的垂直对齐方式。它的可选值与 align-items 属性相同，但它只影响单个项目。

.item {
  align-self: center;
}

Flexbox 是一种强大的 CSS 布局模式，它可以帮助我们快速实现灵活的、自适应的布局。本文介绍了 Flexbox 的常用属性，包括容器属性和项目属性，并提供了一些实际的代码示例。通过学习这些属性，我们可以更好地理解和应用 Flexbox 布局，从而提高我们的前端开发效率。

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