一文详解三个 flex 属性对元素的影响

前言

在CSS中，flex布局是非常强大和灵活的一种布局模式。它提供了一种简单的方式来创建自适应和可伸缩的布局，而不需要使用复杂的浮动或定位技巧。flex布局的核心思想是将容器分割为一个或多个伸缩的项目（也称为弹性项目），并允许这些项目根据需要自动调整大小。

flex-grow

flex-grow属性决定了弹性项目在剩余空间中的放大比例。默认情况下，所有的弹性项目都会占据其宽度或高度的空间，并且剩余空间为空。但是，如果设置了flex-grow属性，那么弹性项目将会根据其flex-grow属性值放大。

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

flex-shrink

flex-shrink属性决定了弹性项目在空间不足时的缩小比例。当容器的空间不足以容纳所有的弹性项目时，flex-shrink属性允许弹性项目缩小以适应容器。flex-shrink属性的默认值是1，表示弹性项目在空间不足时等比例缩小。

.container {
  display: flex;
}

.item {
  flex-shrink: 1;
}

flex-basis

flex-basis属性定义了弹性项目在分配多余空间之前的初始大小。它可以是一个固定的像素值，也可以是一个相对值，如百分比。如果没有设置flex-basis属性，默认值为auto，表示弹性项目将根据其内容的大小确定初始大小。

.container {
  display: flex;
}

.item {
  flex-basis: 200px;
}

总结

通过控制flex-grow、flex-shrink和flex-basis这三个flex属性，我们可以高度自定义弹性项目在容器中的行为。flex-grow决定了弹性项目在剩余空间中的放大比例，flex-shrink决定了弹性项目在空间不足时的缩小比例，而flex-basis则定义了弹性项目在分配多余空间之前的初始大小。

灵活运用这些属性，我们可以轻松创建出自适应、可伸缩的布局，满足不同屏幕尺寸和设备的需求。正是因为其强大的特性，flex布局在现代的Web开发中得到了广泛的应用。