flex-grow、flex-shrink、flex-basis和九宫格布局理解

我将一步步地详细讲解“flex-grow、flex-shrink、flex-basis和九宫格布局理解”的攻略。

Flexbox 的三个主要属性

在 Flexbox 布局中，flex 这个属性有三个主要属性：flex-grow、flex-shrink 和 flex-basis。

• flex-grow：设置项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink：设置项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：定义了项目在分配多余空间之前的初始大小。默认为auto。

这些属性可以单独设置，也可以通过简写属性 flex 同时设置三个属性。比如，flex: 1 0 200px 可以写作 flex-grow: 1，flex-shrink: 0，flex-basis: 200px。

九宫格布局

九宫格布局是一种常见的网格布局，它将一个大容器划分为九个等大小的子容器，每个子容器都包含一个图片或图标等内容。可以使用 Flexbox 进行九宫格布局。

下面是一个九宫格布局的示例：

<div class="grid">
  <div class="item"><img src="image-1.jpg"></div>
  <div class="item"><img src="image-2.jpg"></div>
  <div class="item"><img src="image-3.jpg"></div>
  <div class="item"><img src="image-4.jpg"></div>
  <div class="item"><img src="image-5.jpg"></div>
  <div class="item"><img src="image-6.jpg"></div>
  <div class="item"><img src="image-7.jpg"></div>
  <div class="item"><img src="image-8.jpg"></div>
  <div class="item"><img src="image-9.jpg"></div>
</div>

这里九个子容器都被设置为 flex: 1;，表示它们应该分配等量的空间，并且 flex-basis 为 0（默认值），项目不设定宽度时就会自动填满容器。那么当父容器有多余空间时，所有的子容器都会按比例放大；当父容器空间不足时，所有的子容器都会按比例缩小。

另外，可以为子容器设置 margin 或 padding 等属性来调整子容器的间距和内边距。

/* 九宫格样式 */
.grid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5em;
}
.item img {
  max-width: 100%;
  height: auto;
}

物品列表布局

在物品列表中，每个列表项都包含一段文本和一个图标。我们可以使用 Flexbox 布局来实现一个自适应的物品列表布局，使得图标与文本的宽度比例始终保持稳定。

<ul class="list">
  <li>
    <div class="icon"><i class="icon-1"></i></div>
    <div class="text">列表项 #1</div>
  </li>
  <li>
    <div class="icon"><i class="icon-2"></i></div>
    <div class="text">列表项 #2</div>
  </li>
  <li>
    <div class="icon"><i class="icon-3"></i></div>
    <div class="text">列表项 #3</div>
  </li>
</ul>

每个列表项都包含一个图标和一段文本，icon 和 text 都被设置为 flex: 1;，表示两者应该分配等量的空间。但是，这个例子中想要保持图标宽度为文本宽度的一半。这里可以使用 flex-basis 属性，为 icon 元素设置一个固定的宽度，相当于 flex-basis: 50%;。这样，当父容器有多余空间时，图标会按比例放大，但是文本的宽度会始终是图标宽度的两倍。

/* 列表样式 */
.list {
  list-style: none;
  padding: 0;
  width: 90%;
  margin: 0 auto;
}
.list li {
  display: flex;
  align-items: center;
  margin: 0.5em 0;
}
.list .icon {
  flex-basis: 50%; /* 固定宽度 */
  text-align: center;
}
.list .text {
  flex: 1;
  padding-left: 1em;
}

这样，就可以实现一个自适应的物品列表布局。