Question

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

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

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

我只添加一些填充。

/* === 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，因此如果添加另一篇文章，它会更加动态。

Answer 2

justify-content: space-between将自动填充弹性轴上元素之间的空间。这意味着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>

Flexbox：证明内容：两者之间的空间？

2 个答案: