Проблема с отображением: flex & count-count: 2 - PullRequest
Новая
       25

Проблема с отображением: flex & count-count: 2

0 голосов
/ 29 мая 2018

Я пытаюсь создать два столбца определенной ширины.Оба столбца имеют изображение и текст под изображением.Я справился с этим с помощью: 

.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

enter image description here

Это очень раздражает, потому что то, что я думал, было бы довольно просто сделать, оказалось кошмаром!

Я также пытался: 

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

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

Однако эта проблема возникает:

enter image description here

Я очень озадачен и хотел бы, чтобы кто-то помог мне.

Для справки, вот 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>

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Чтобы разрешить сгибанию дочерних элементов, вам нужно установить 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 здесь выглядит гораздо эффективнее.

0 голосов
/ 29 мая 2018

Удалите поле из элементов img, и оно будет правильно отцентрировано.

Используйте .quick-links figure { min-width: 500px;}, чтобы установить минимальную ширину текста.

...