Flexbox 图片和文字大小不一样

Question

我正在尝试使用以下方法制作具有相同高度和宽度的 flexbox：

flex: 1;

但它并没有像我想的那样工作，图像框变得比文本框大。

这里我举了个小例子： https://jsfiddle.net/p3uowcdg/9/

Answer 1

您应该使用 grid 布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.box-image {
  width: 100%;
}

.box-text {
  width: 100%;
}

结果