如何在 Flexbox 中的项目之间创建间距？

Question

我试图将子 Flexbox 放在父 Flexbox 中，使其位于一排，垂直和水平居中，并在 CSS 中使用间隙属性在它们之间留有空间，但这些子 Flexbox 内的图像和嵌入视频似乎不是水平排列的拉伸。

.latest-news-format {
  background-color: #8ebfa1;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 10px;
}

.latest-news-format div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  max-height: 100%;
  border: 1px solid black;
}

.latest-news-format div img {
  /* max-width: 100%; */
  object-fit: cover;
  max-height: 80%;
  max-width: 100%;
  /* aspect-ratio: 16/9; */
}

.latest-news-format div p {
  text-align: center;
  /* This centers the text within each div */
  margin-bottom: auto;
  /* This pushes the text to the bottom of the div */
}

.latest-news-format div iframe {
  /* object-fit: cover; */
  flex-grow: 1;
  flex-shrink: 1;
  aspect-ratio: auto;
  margin: auto;
}

<div style="max-width: 100%; height: 20%; background-color: bisque; display:flex; flex-wrap: wrap; align-content: space-evenly; margin: 20px 0px;">
  <h2>
    Latest News
  </h2>
  <br>

  <div style="margin: 15px 15px;" class="latest-news-format">

    <!--iKON news-->
    <div>
      <a href="https://www.soompi.com/article/1598908wpp/ikons-jinhwan-announces-military-enlistment-date-with-heartfelt-message" title="iKON Jinhwan Enlistment Announcement" target="_blank">
        <img style="object-fit: contain; max-width: 100%;" src="https://picsum.photos/200/300.webp" alt="iKON group photo">
        <p>
          iKON Jinhwan Enlistment Announcement with Heartfelt Letter
        </p>
      </a>
    </div>
    
    <!--SEVENTEEN news-->
    <div>
      <a href="https://www.soompi.com/article/1648474wpp/seventeen-to-headline-lollapalooza-berlin-2024" title="SEVENTEEN Headline at Lollapalooza 2024" target="_blank">
        <img src="https://picsum.photos/200/300.webp" alt="SEVENTEEN group photo">
        <p>SEVENTEEN Perform At Lollapalooza Berlin</p>
      </a>
    </div>
    
    <!--SEVENTEEN watch-->
    <div>
      <iframe src="https://youtu.be/4g6AC6mXShE?si=bxoYJBNyIaxXMNCp"></iframe>
      <a href="https://youtu.be/4g6AC6mXShE?si=bxoYJBNyIaxXMNCp" title="Going SEVENTEEN EP.79" target="_blank">
        <p>
          Watch: Going SEVENTEEN New Episode 79 - Going Vol 2
        </p>
      </a>
    </div>
    
    <!--TAEYONG news-->
    <div>
      <a href="https://www.soompi.com/article/1649391wpp/ncts-taeyong-confirms-military-enlistment-date" title="Taeyong Enlistment Date" target="_blank">
        <img src="https://picsum.photos/200/300.webp" alt="Taeyong picture" title="Taeyong Enlistment Date">
        <p>
          SM Confirms Taeyong Military Enlistment Date
        </p>
      </a>
    </div>

  </div>
</div>

期望看到所有 img/iframe（嵌入视频）具有相同的宽度，在其弹性盒内完全水平拉伸，相同的高度。子 Flexbox 之间必须有间隙

Answer 1

在 CSS 中进行以下更改：

/* add this new class*/
.latest-news-format div a {
  width: 100%;
}

.latest-news-format div img {
  object-fit: cover;
  height: 240px;
  /* as your p tag can take 2 line or 3 line either if you want full p-tag
  you have to specify specific height*/
  width: 100%;
  /* adjust width according to your need but instead of max-width use width */
}

.latest-news-format div iframe {
  flex-grow: 1;
  flex-shrink: 1;
  aspect-ratio: auto;
  margin: auto;
  height: 240px;
  width: 100%;
  /* same as your img height and width */
}

Answer 2

这是 CSS grid 比 Flexbox 更好的地方。这将使您更轻松地确保网格中的每个项目具有相同的大小，并使您更轻松地创建响应式设计。

.latest-news-grid {
  background-color: #8ebfa1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.latest-news-grid article {
  border: 1px solid black;
}

.latest-news-grid img,
.latest-news-grid iframe {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16/9;
}

.latest-news-grid p {
  text-align: center;
  padding: 0 1rem;
}

<article>
  <h2>
    Latest News
  </h2>
  <div class="latest-news-grid">
    <!-- IKON news -->
    <article>
      <a href="https://www.soompi.com/article/1598908wpp/ikons-jinhwan-announces-military-enlistment-date-with-heartfelt-message" title="iKON Jinhwan Enlistment Announcement" target="_blank">
        <img src="https://6.soompi.io/wp-content/uploads/image/20230706224446_Jinhwan.jpg?s=900x600&e=t" alt="iKON group photo">
        <p>
          iKON Jinhwan Enlistment Announcement with Heartfelt Letter
        </p>
      </a>
    </article>
    <article>
      <a href="https://www.soompi.com/article/1648474wpp/seventeen-to-headline-lollapalooza-berlin-2024" title="SEVENTEEN Headline at Lollapalooza 2024" target="_blank">
        <img src="https://6.soompi.io/wp-content/uploads/image/20240313111929_seventeen-5.jpg?s=900x600&e=t" alt="SEVENTEEN group photo">
        <p>SEVENTEEN Perform At Lollapalooza Berlin</p>
      </a>
    </article>
    <!--SEVENTEEN watch-->
    <article>
      <iframe src="https://www.youtube.com/embed/4g6AC6mXShE?si=-g3MI2FlGwRVlt-s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      <a href="https://youtu.be/4g6AC6mXShE?si=bxoYJBNyIaxXMNCp" title="Going SEVENTEEN EP.79" target="_blank">
        <p>
          Watch: Going SEVENTEEN New Episode 79 - Going Vol 2
        </p>
      </a>
    </article>
    <!--TAEYONG news-->
    <article>
      <a href="https://www.soompi.com/article/1649391wpp/ncts-taeyong-confirms-military-enlistment-date" title="Taeyong Enlistment Date" target="_blank">
        <img src="https://6.soompi.io/wp-content/uploads/image/20240318061422_taeyong.jpeg?s=900x600&e=t" alt="Taeyong picture" title="Taeyong Enlistment Date">
        <p>
          SM Confirms Taeyong Military Enlistment Date
        </p>
      </a>
    </article>

  </div>
</article>

响应示例：

.latest-news-grid {
  background-color: #8ebfa1;
  display: grid;
  /* you can make a responsive grid without media queries */
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
}

.latest-news-grid article {
  border: 1px solid black;
}

.latest-news-grid img,
.latest-news-grid iframe {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16/9;
}

p {
  text-align: center;
  padding: 0 1rem;
}

<article>
  <h2>
    Latest News
  </h2>
  <div class="latest-news-grid">
    <!-- IKON news -->
    <article>
      <a href="https://www.soompi.com/article/1598908wpp/ikons-jinhwan-announces-military-enlistment-date-with-heartfelt-message" title="iKON Jinhwan Enlistment Announcement" target="_blank">
        <img src="https://6.soompi.io/wp-content/uploads/image/20230706224446_Jinhwan.jpg?s=900x600&e=t" alt="iKON group photo">
        <p>
          iKON Jinhwan Enlistment Announcement with Heartfelt Letter
        </p>
      </a>
    </article>
    <article>
      <a href="https://www.soompi.com/article/1648474wpp/seventeen-to-headline-lollapalooza-berlin-2024" title="SEVENTEEN Headline at Lollapalooza 2024" target="_blank">
        <img src="https://6.soompi.io/wp-content/uploads/image/20240313111929_seventeen-5.jpg?s=900x600&e=t" alt="SEVENTEEN group photo">
        <p>SEVENTEEN Perform At Lollapalooza Berlin</p>
      </a>
    </article>
    <!--SEVENTEEN watch-->
    <article>
      <iframe src="https://www.youtube.com/embed/4g6AC6mXShE?si=-g3MI2FlGwRVlt-s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      <a href="https://youtu.be/4g6AC6mXShE?si=bxoYJBNyIaxXMNCp" title="Going SEVENTEEN EP.79" target="_blank">
        <p>
          Watch: Going SEVENTEEN New Episode 79 - Going Vol 2
        </p>
      </a>
    </article>
    <!--TAEYONG news-->
    <article>
      <a href="https://www.soompi.com/article/1649391wpp/ncts-taeyong-confirms-military-enlistment-date" title="Taeyong Enlistment Date" target="_blank">
        <img src="https://6.soompi.io/wp-content/uploads/image/20240318061422_taeyong.jpeg?s=900x600&e=t" alt="Taeyong picture" title="Taeyong Enlistment Date">
        <p>
          SM Confirms Taeyong Military Enlistment Date
        </p>
      </a>
    </article>

  </div>
</article>