Flexbox : justify-content : space-between ?

Question

Comment utiliser justify-content: space-between; ? J'ai besoin d'espace entre 2 articles dans une section. Et de l'espace entre une img et une div dans chaque article.

---

Comment cela se présente-t-il actuellement ? et... Il devrait ressembler à ceci .

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

---

EDIT : modifié .flexcontainer flex-direction à la colonne

/* === 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 remplit automatiquement l'espace entre les éléments sur l'axe de flexion. Cela signifie que 1. vous n'avez aucun contrôle sur la quantité d'espace entre les éléments, le navigateur calcule et remplit l'espace comme il le souhaite ; 2. seul l'espace sur l'axe de flexion (par défaut : rangée ; axe x) est rempli, de sorte que l'espace sous votre première rangée n'est pas rempli automatiquement.

La solution est de revenir aux bonnes vieilles marges. Il est à noter que margin se comporte légèrement différemment pour les éléments flexibles, c'est-à-dire margin: auto remplit l'espace disponible avec une marge.

/* === 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

Je me contenterais d'ajouter un peu de rembourrage.

/* === 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>

Edit : J'ai changé le css pour qu'il soit plus dynamique si un autre article est ajouté.