如何为两个弹性框内容保持相同的填充？

Question

每当我在第二行交换内容时，试图在两个弹性框内容之间保持相同的间隙。 交换第二个弹性盒内容后如何保持相同的填充。

在这里我附上我的问题图片

这是我的 html 代码

 .profile-container { width: 80%; }.profile { display: flex; align-items: center; justify-content: center; }.profile img { width: 50%; }

 <div class="profile-container"> <div class="profile"> <div class="profile-pic"> <img src="avater.png" alt=""> </div> <div class="text"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptas sapiente laudantium expedita similique cum enim voluptates modi mollitia, animi architecto adipisci reiciendis beatae dicta non dolorum blanditiis odit veniam?</p> </div> </div> <div class="profile"> <div class="text"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptas sapiente laudantium expedita similique cum enim voluptates modi mollitia, animi architecto adipisci reiciendis beatae dicta non dolorum blanditiis odit veniam?</p> </div> <div class="profile-pic"> <img src="avater.png" alt=""> </div> </div> </div>

Answer 1

您可以为图像设置特定宽度，防止收缩和增长flex: 0 0 [width]和文本的最大宽度。 然后在您的配置文件元素上设置justify-content:space-between以分配文本和图片之间的剩余空间。

您的 CSS 看起来像这样（根据您的喜好调整宽度）：

.profile-container {
  width: 80%;
}
.profile { 
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile .text {
  max-width: calc(100% - 115px); /* 100% minus width superior to width of image */
}
.profile img {
  width: 55px;
  flex: 0 0 55px;
}

这里的工作示例： https://jsfiddle.net/hcj183pk/