如何在 Flexbox 中制作文本，而不定义 flexbox 的宽度？

Question

我有这个问题：我在屏幕中央有 3 张照片的flexbox 。 在这些照片下，我有一些文字，如手机号码等。

当我将此文本添加到此框中时，此文本定义了我的框的宽度，并且它正在移动框并且它们不再位于中心。

最终结果应该是：框宽度应该相同，但文本应该中断并居中。

在这里你可以看到一盒的大小
在这里你可以看到另一个盒子的尺寸

片段：

 .ikony { padding-top: 60px; display: inline-flex; justify-content: center; width: 100%; font-weight: 600; font-size: 16px; color: #020E46; text-align: center; font-family: Open Sans,Arial,sans-serif;} .column { padding: 90px 70px 0px 70px;}

 <div class="ikony"> <div class="column prvy"> <img src="img/mobil-icon.png" alt="iconka-mobil" width="100px" height="100px"> <div class="txtpod"> <p>+421 918 000 000</p> </div> </div> <div class="column"> <img src="img/pin-icon.png" alt="ikona pinu" width="100px" height="100px"> <div class="txtpod"> <p>address 273/14, Svit</p> </div> </div> <div class="column"> <img src="img/email.png" alt="ikona pinu" width="100px" height="100px"> <div class="txtpod"> <p>myemail@gmail.com</p> </div> </div> </div>

感谢您的任何建议

Answer 1

将flex-grow: 0和width: 33%到 flex 项目（ .column ）以防止它们变宽。

但是，如果您在其中一个容器中有一个类似于电子邮件地址的内容，由于它不包含空格，因此不能分成多行（如您的代码片段示例中），因此强制其宽度超过 33%，您应该使用小字体，使其适合 33% 的宽度。