Flexbox: justify-content: space-between?

user_9134928 0
Viewed 3514

How do i make use of justify-content: space-between;? I need space between 2 articles in a section. And space between an img and a div in each article.

How it currently looks like and... It should look like this .

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

EDIT: changed .flexcontainer flex-direction to column

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

flexbox css
2 Answers

justify-content: space-between will automatically fill the space between the elements on the flex-axis. This means that 1. you have no control over the amount of space between the elements, the browser will calculate and fill as it sees fit; 2. only the space on the flex-axis (default: row; x-axis) is filled so the space below your first row is not filled automatically.

The solution is to go back to good ol' margins. Do note that margin behaves slightly different on flex items, i.e. margin: auto will fill the available space with a margin.

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

user_11506830

I would just add some padding.

/* === 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: I changed the css so it's more dynamic if another article is added.

user_95683580
Related