Flexbox打造2x2图片网格布局教程

/* 父容器：设置Flexbox行为 */
.upgrades {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  justify-content: space-between; /* 在项目之间分配空间 */
  /* 其他可能需要的样式 */
  flex: 1 0 auto; /* 确保article能够根据内容和父级flex行为调整 */
}

/* Flex项目：控制尺寸和行为 */
figure {
  background-color: #3482D5;
  height: 80px; /* 示例固定高度 */
  display: flex; /* figure内部内容也使用flex布局 */
  align-items: center; /* 垂直居中figcaption */
  margin: 5px; /* 项目之间的外边距 */
  line-height: 1.5;

  /* 核心改动：控制项目宽度 */
  flex: 1 0 40%; /* flex-grow: 1, flex-shrink: 0, flex-basis: 40% */
}

/* 针对更外层的section或article容器的样式，确保flex布局生效 */
section {
  display: flex;
  flex-direction: row-reverse; /* 示例中的方向，可根据需求调整 */
  flex-wrap: wrap;
  justify-content: space-between;
}

article {
  flex: 200; /* 示例中的flex值，可根据需求调整 */
}

.reviews {
  align-self: flex-end; /* 示例中的对齐方式，可根据需求调整 */
}

解析 flex: 1 0 40%;

• flex-grow: 1: 当容器有剩余空间时，Flex项目会尝试放大以填充空间。这意味着如果一行只有一个元素，它会占据全部剩余空间。
• flex-shrink: 0: Flex项目不会缩小。这确保了即使空间不足，项目也不会小于其flex-basis。
• flex-basis: 40%: 这是最关键的部分。它设定了Flex项目在分配剩余空间之前，其在主轴上的初始尺寸为父容器宽度的40%。当容器宽度足够时，两个40%宽度的项目加上它们的margin（例如5px），将占据不到100%的宽度，从而允许它们并排显示。当第三个项目出现时，由于空间不足，它会因为flex-wrap: wrap而换行。

通过将flex-basis设置为40%，每行可以容纳两个