显示问题：弹性和列数：2答案

【问题标题】：Issue with display: flex & column-count: 2显示问题：弹性和列数：2
【发布时间】：2018-10-02 03:17:44
【问题描述】：

我正在尝试创建两个具有一定宽度的列。两列都有图像和图像下方的文本。我已经做到了：

.quick-links img {
    height: 7.5em;
    width: 7.5em;
    border-radius: 10em;
    margin: 0 15em;
}

.quick-links {
    display: flex;
    justify-content: center;
}

但是，每当网站缩小到大约 1200 像素的宽度时，就会发生一些奇怪的事情：

https://gyazo.com/5f01aa7248873d999dd6552e089b1c2f

这非常烦人，因为我认为制作起来很简单，结果却是一场噩梦！

我也试过了：

.quick-links img {
    height: 7.5em;
    width: 7.5em;
    border-radius: 10em;
    margin: 0 15em;
}

.quick-links {
    column-count: 2;
    display; inline-block;
}

但是，随后会出现此问题：

我很困惑，很想有人帮助我。

作为参考，这里是 HTML：

<section class="quicklinks">
        <h1>Quicklinks</h1>
        <div class="quick-links">
            <!-- Client Reviews -->
            <figure class="reviews">
                <img src="images/RatingsTick.png" alt="Ratings Tick Image">
                <figcaption class="port-desc">
                    <p><strong>Reviews</strong></p>
                    <p>-Filler Text-</p>
                </figcaption>
            </figure>

            <!-- Portfolio -->
            <figure class="portfolio">
                <img src="images/Portfolio.png" alt="Portfolio Image">
                <figcaption class="port-desc">
                    <p><strong>Previous Work</strong></p>
                    <p>-Filler Text-</p>
                </figcaption>
            </figure>
        </div>

</section>

【问题讨论】：

当窗口缩小时您期望的行为是什么？要隐藏的文本或要堆叠的框？
是的，我想让两个盒子在窗口缩小时堆叠起来。如果我是正确的，我不会使用显示 min-width: 25em, display: inline 的媒体查询
因此，如果您允许 flex 父级换行，则您的 flex 子级的最小宽度是提示 :)

标签： html css flexbox css-multicolumn-layout

【解决方案1】：

要允许 flex 子级进行换行，您需要设置 flex-wrap:wrap;。

您也可以设置min-width 来创建一个几乎与媒体查询类似的断点。

.quick-links {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  text-align: center;
  flex-wrap: wrap;
}

figure {
  min-width:25em;/* or whatever value suits your needs */
  border: solid;/* see me */
}

h1 {
  text-align: center;
}

<section class="quicklinks">
  <h1>Quicklinks</h1>
  <div class="quick-links">
    <!-- Client Reviews -->
    <figure class="reviews">
      <img src="images/RatingsTick.png" alt="Ratings Tick Image">
      <figcaption class="port-desc">
        <p><strong>Reviews</strong></p>
        <p>-Filler Text-</p>
      </figcaption>
    </figure>

    <!-- Portfolio -->
    <figure class="portfolio">
      <img src="images/Portfolio.png" alt="Portfolio Image">
      <figcaption class="port-desc">
        <p><strong>Previous Work</strong></p>
        <p>-Filler Text-</p>
      </figcaption>
    </figure>
  </div>

</section>

关于column-count，它看起来很有用，但不幸的是，这是一条 CSS 规则，不幸的是保留在 css 草案中，flex 在这里似乎更有效。

【讨论】：

编辑：我觉得我需要更好地解释这一点。目前在大屏幕尺寸下，盒子不相邻，一个在另一个之上。我认为改变 min-width 会阻止这种情况，但事实并非如此。我希望两个框都以特定的屏幕尺寸换行，并且我希望 p 元素也以特定的屏幕尺寸换行。
我在 Photoshop 上制作了一张图像，以描绘在更大的屏幕尺寸（任何大于 1100 像素宽度的东西）下我想要发生的事情。目前，在大屏幕尺寸下，框的宽度不同，我如何确保它们始终相同，即使这意味着文本更频繁地换行？ i.gyazo.com/2a1779699277164e650a4f72ff782259.png
@JShepherd 这更像你试图做的吗？ codepen.io/gc-nomade/pen/OEPMvJ
确实如此，但我现在已经自愿做到了。感谢您的帮助！

【解决方案2】：

从 img 元素中删除边距，它会正确居中。

使用.quick-links figure { min-width: 500px;} 设置文本的最小宽度。

【讨论】：

但我希望将img元素分开一定数量。我将如何实现上述和这个？
另外我正在尝试在文本上设置 500px 的宽度。由于我使用的是 display: flex 所以列宽是 void，我将如何实现这一点
使用 .quick-links figure { min-width: 500px;} 设置文本的最小宽度。