Почему не работает justify-content: space-between?

Question

У меня есть данный код, я сделал для родителя "prefecture__card " display:flex, картинка и блок с текстом("prefecture__card-text") выстроились горизонтально, но я хочу, чтобы они прижались к краям родительского контейнера и между ними образовалось пустое пространство, но этого не происходит

            <div class="prefecture__card-one prefecture__card">

                <img src="/src/prefecturw1.svg" class="prefecture__card-img" alt="Prefecture in Focus: Tottori">
                
                <div class="prefecture__card-text">
                    <h2 class="prefecture__card-title">Prefecture in Focus: Tottori</h2>
                    <div class="prefecture__card-text">Jump off balcony, onto stranger's head. Chase ball of string
                        hide when guests come over. Being gorgeous with belly side up i could pee on this if i had
                        the energy but under the bed, for attack the child, open the door, </div>
                    <a href="#" class="prefecture__card-link">VIEW PREFECTURE</a>
                </div>
               
            </div>

Answer 1

Очень даже работает, просто для блока с текстом не худо бы задать максимальную ширину, иначе он может занять всё свободное место. По хорошему, и картинке желательно указать размеры.

.prefecture__card {
  display: flex;
  justify-content: space-between;
}

.prefecture__card-text {
  max-width: 50%;
}

<div class="prefecture__card-one prefecture__card">

  <img src="/src/prefecturw1.svg" class="prefecture__card-img" alt="Prefecture in Focus: Tottori">

  <div class="prefecture__card-text">
    <h2 class="prefecture__card-title">Prefecture in Focus: Tottori</h2>
    <div class="prefecture__card-text">Jump off balcony, onto stranger's head. Chase ball of string
      hide when guests come over. Being gorgeous with belly side up i could pee on this if i had
      the energy but under the bed, for attack the child, open the door, </div>
    <a href="#" class="prefecture__card-link">VIEW PREFECTURE</a>
  </div>

</div>

Answer 2

А если таки надо, чтобы текст занимал всю ширину своего блока и не выравнивался по центру, а прижимался влево (что более логично), то лучше создать внешний блочный элемент-оболочку, который растянется на всю ширину экрана. И не забыть посредством gap (уже работает во флексах) задать внутренние отступы между flex-блоками. Тогда и space-between не нужен. Например:

<style>
.wrapper{ /*Какие-то свои классы, если нужно. Например: margin, padding*/
}
.prefecture__card {
  display: flex;
  gap: 20px; 
}
</style>

<div class = "wrapper">
<div class="prefecture__card-one prefecture__card">

    <img src="https://picsum.photos/seed/picsum/100/150" class="prefecture__card-img" alt="">

  <div class="prefecture__card-text">
    <h2 class="prefecture__card-title">Prefecture in Focus: Tottori</h2>
    <div class="prefecture__card-text">Jump off balcony, onto stranger's head. Chase ball of string
      hide when guests come over. Being gorgeous with belly side up i could pee on this if i had
      the energy but under the bed, for attack the child, open the door, </div>
    <a href="#" class="prefecture__card-link">VIEW PREFECTURE</a>
  </div>
</div>
</div>

БЛОГ НА HUSL

Почему не работает justify-content: space-between?

Ответы (2 шт):