CSS Flexbox 布局中 flex 属性的用法

什么是 CSS Flexbox 布局？

CSS Flexbox 布局（简称 Flexbox）是一种用于网页布局的技术，在多种屏幕尺寸和设备上实现灵活布局的能力使得它成为了前端开发的重要技术之一。Flexbox 布局通过定义主轴和交叉轴来实现布局，可以让元素相对于容器进行弹性排列、对齐和分布。

flex 属性的基本用法

在 CSS Flexbox 布局中，flex 属性是用来设置子元素的伸缩性的属性。设置 flex 属性有两个关键字，分别是 flex-grow 和 flex-shrink，它们都接收一个值（通常是整数），用来定义一个子元素在可用空间内所占比例的大小。 flex-basis 属性也可以和 flex 属性一起使用，来设置子元素在主轴上的初始大小。

flex-grow

flex-grow 属性用来定义当前子元素在所属容器可用空间中的相对比例。值为 0 表示不增长，而其他数字则表示比例权重。比如说，如果有两个子元素都设置了 flex-grow: 1 ，那么它们所占比例是一样的，都会自动铺满容器。

.container {
  display: flex;
}

.box {
  flex-grow: 1;
}

上述代码中， .container 为父元素，它被设置成了 display: flex 以启用 Flexbox 布局。.box 是 .container 的子元素，它被设置成了 flex-grow: 1，表示在可用空间中它所占的比例与其它设置了 flex-grow: 1 的子元素是一致的。

flex-shrink

flex-shrink 属性用来定义当前子元素缩小的比例。值为 0 表示不可缩小，而其他数字则表示所占比例权重。当容器尺寸不足以容纳子元素时，通过设置 flex-shrink 属性可以告诉浏览器哪些元素可以相应地缩小。如果一个元素的 flex-shrink 属性设置为 0，而其他元素的 flex-shrink 属性都设置为 1，那么这个元素不会缩小。

.container {
  display: flex;
}

.box {
  flex-shrink: 1;
}

上述代码中， .container 为父元素，它被设置成了 display: flex 以启用 Flexbox 布局。.box 是 .container 的子元素，它被设置成了 flex-shrink: 1，表示在容器尺寸不足以容纳所有子元素时，这个元素所占空间会比其它子元素更倾向于缩小。

flex-basis

flex-basis 属性用来设置子元素在主轴上的初始大小。默认值为 auto，表示大小根据元素的内容来决定。如果设置了具体的像素或者百分比值，那么就表示子元素在主轴上的初始大小为这个值。

.container {
  display: flex;
}

.box {
  flex-basis: 200px;
}

上述代码中， .container 为父元素，它被设置成了 display: flex 以启用 Flexbox 布局。.box 是 .container 的子元素，它被设置成了 flex-basis: 200px，表示在主轴上该元素的初始大小为 200px。

flex 属性的高级用法

除了基本的 flex-grow、flex-shrink 和 flex-basis 之外，flex 属性还支持一些高级用法。

flex-wrap

flex-wrap 属性用来设置子元素在容器中的换行方式，可以取三个值，分别是 nowrap、wrap 和 wrap-reverse。默认值是 nowrap，意味着浏览器不会强制子元素换行。

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

上述代码中，.container 被设置成 display: flex 以启用 Flexbox 布局，同时设置了 flex-wrap: wrap 来让子元素在容器宽度不足时自动换行。

flex-direction

flex-direction 属性用来设置主轴的方向，可以取四个值，分别是 row、row-reverse、column 和 column-reverse。默认值是 row，表示主轴从左往右排列子元素。

.container {
  display: flex;
  flex-direction: column;
}

上述代码中，.container 被设置成 display: flex 以启用 Flexbox 布局，同时设置了 flex-direction: column，让子元素沿垂直方向排列。

justify-content

justify-content 属性用来设置子元素在主轴上的对齐方式，可以取五个值，分别是 flex-start、flex-end、center、space-between 和 space-around。默认值是 flex-start，表示子元素靠左对齐。

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

上述代码中，.container 被设置成 display: flex 以启用 Flexbox 布局，同时设置了 justify-content: center，让子元素在主轴上居中对齐。

align-items

align-items 属性用来设置子元素在交叉轴上的对齐方式，可以取五个值，分别是 flex-start、flex-end、center、baseline 和 stretch。默认值是 stretch，表示子元素被拉伸以填满容器的交叉轴空间。

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

上述代码中，.container 被设置成 display: flex 以启用 Flexbox 布局，同时设置了 align-items: center，让子元素在交叉轴上居中对齐。

总结

CSS Flexbox 布局能够让我们灵活地对网页进行布局、对齐和分布。flex 属性是其中的核心属性之一，通过灵活配置 flex-grow、flex-shrink 和 flex-basis 可以让我们掌控子元素在主轴上的可用空间。同时，高级的属性 flex-wrap、flex-direction、justify-content 和 align-items 的应用可以使得我们的布局效果更加出色。通过深入了解 Flexbox 布局中这些属性的应用，我们可以进一步发扬其功能，打造出更为精美的网页。

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