Flexbox: justify-content: пробел?

Question

Как мне использовать justify-content: space-between;? Мне нужно пространство между 2 статьями в разделе. И пробел между img и div в каждой статье.

---

Как это выглядит в настоящее время а также... Это должно выглядеть так .

Codepen: https://codepen.io/Aetherr/pen/MPRJva

---

РЕДАКТИРОВАТЬ: изменено .flexcontainer flex-direction на столбец

/* === BELIEFS === */

.beliefs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


/* === RESERVATION === */

.reservation {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}


/* === FLEXCONTAINER === */

.flexcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

section.flexcontainer p {
  width: 500px;
}

section.flexcontainer img {
  width: 500px;
}

<section class="flexcontainer">
  <article class="beliefs">
    <img src="images/beliefs.jpg" alt="Our beliefs image" title="Our beliefs">
    <div>
      <h3>Our beliefs</h3>
      <p>When eating...</p>
      <p>We know...</p>
    </div>
  </article>
  <article class="reservation">
    <img src="images/reservation.jpg" alt="reservation image" title="Reservation">
    <div>
      <h3>Reservation</h3>
      <p>To fully...</p>
      <p>This way...</p>
    </div>
  </article>
</section>

Answer 1

justify-content: space-between автоматически заполнит пространство между элементами на оси Flex. Это означает, что: 1. у вас нет контроля над количеством пространства между элементами, браузер будет вычислять и заполнять так, как считает нужным; 2. заполнено только пространство на оси Flex (по умолчанию: строка; ось X), поэтому пространство под первой строкой не заполняется автоматически.

Решение состоит в том, чтобы вернуться к прежним нормам. Обратите внимание, что margin ведет себя немного по-другому на гибких элементах, то есть margin: auto заполнит доступное пространство с полем.

/* === RESERVATION === */
.reservation {
  flex-direction: row-reverse;
}


/* === FLEXCONTAINER === */

.flexcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}


.flexcontainer p {
  width: 500px;
}

.flexcontainer article {
  display: flex;
}

.flexcontainer article img {
  width: 500px;
  margin: 24px;
  margin-left: 0;
}

.flexcontainer article:nth-child(even) img {
  margin: 24px;      
  margin-right: 0;
}

<section class="flexcontainer">
  <article class="beliefs">
    <img src="https://via.placeholder.com/500" alt="Our beliefs image" title="Our beliefs">
    <div>
      <h3>Our beliefs</h3>
      <p>When eating...</p>
      <p>We know...</p>
    </div>
  </article>
  <article class="reservation">
    <img src="https://via.placeholder.com/500" alt="reservation image" title="Reservation">
    <div>
      <h3>Reservation</h3>
      <p>To fully...</p>
      <p>This way...</p>
    </div>
  </article>
</section>

Answer 2

Я бы просто добавил несколько отступов.

/* === BELIEFS === */
.beliefs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* === RESERVATION === */
.reservation {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

/* ==== SLOGAN === */
.slogan {
    font-size: 1.4rem;
    margin-bottom: 55px;
}

/* === FLEXCONTAINER === */
.flexcontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
section.flexcontainer p {
    width: 500px;
}
section.flexcontainer img {
    width: 500px;
    height:375px;
}
section.flexcontainer article:nth-child(even) img {
    padding-left:25px;
    padding-bottom:25px;
}
section.flexcontainer article:nth-child(odd) img {
    padding-right:25px;
    padding-bottom:25px;
}

<section class="flexcontainer">
    <article class="beliefs">
        <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" alt="Our beliefs image" title="Our beliefs">
        <div>
            <h3>Our beliefs</h3>
            <p>When eating is motivated by pleasure, rather than hunger. A bit of italian tradition in the middle of
                the
                modern
                world. A combination of traditional craftsmanship and the quality of “made in italy”.
            </p>
            <p>
                We know your time is money. The spaces are reduced in this modern world. To meet your desires, in
                every
                time and
                place, there we are that bring you a little moment of pleasure through spaces of your life.
            </p>
        </div>
    </article>
    <article class="reservation">
        <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" alt="reservation image" title="Reservation">
        <div>
            <h3>Reservation</h3>
            <p>
                To fully enjoy this experience you can call us on 646-755-8939 to book you table between 5.00
                pm-11.30
                pm
                (between
                11.30 am-11.30 pm on weekend).
            </p>
            <p>
                This way we can reserve you a special spot in our warm italian atmosphere. We advise to call upfront
                for
                any large
                group
            </p>
        </div>
    </article>
</section>

Редактировать: я изменил CSS, чтобы он был более динамичным, если добавляется другая статья.