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

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

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

Answer 2

要允许弹性儿童包裹，您需要设置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在这里看起来效率更高。

显示问题：flex＆amp;列数：2

2 个答案: