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

Question

我正在尝试创建具有特定宽度的两列。两列都有图像和图像下方的文本。我用以下方法解决了这个问题：

.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>

Answer 1

移除 img 元素的边距，它将正确居中。

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

Answer 2

要允许 flex children 换行，您需要设置 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 在这里似乎更有效。

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

Issue with display: flex & column-count: 2

html

css

flexbox

css-multicolumn-layout