显示问题: flex & column-count: 2

Question

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

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

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

然而，每当网站缩小到大约1200px的宽度时，就会发生一些奇怪的事情：

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>

Answer 1

要允许flex子代包装，您需要设置flex-wrap:wrap;。

您还可以设置一个min-width来创建一个断点，这与mediaquerie几乎一样。

​

.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在这里似乎更有效。

Answer 2

去掉img元素的边距，它就会正确地居中。

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