css - Flexbox:证明内容:空格？

Question

如何使用justify-content: space-between;？我需要在一个部分的 2 篇文章之间留出空间。以及每篇文章中 img 和 div 之间的空格。

---

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

代码笔: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-axis 上元素之间的空间。这意味着 1. 您无法控制元素之间的空间量，浏览器将按其认为合适的方式进行计算和填充； 2. 仅填充 flex 轴(默认值:行；x 轴)上的空间，因此不会自动填充第一行下方的空间。

解决方案是恢复良好的利润率。请注意 margin 在 flex 元素上的行为略有不同，即 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>