Flexbox 图像和文本大小不同答案

【问题标题】：Flexbox image and text size are not sameFlexbox 图像和文本大小不同
【发布时间】：2022-02-13 14:08:59
【问题描述】：

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

flex: 1;

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

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

【问题讨论】：

【解决方案1】：

你应该使用grid布局：

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

.box-image {
  width: 100%;
}

.box-text {
  width: 100%;
}

【讨论】：