Html Question posted in
Some basic documentation can be found here.

Html – How can I create spacing between items in flexbox?

I am trying to place the child flexboxes in my parent flexbox to be in one row, vertically and horizontally centered, and have space between them with gap property in css but the images and embedded video inside those child flexbox don’t seem to horizontally stretch.

enter image description here

.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>

expect to see all img/iframe (embedded video) to have equal width, fully horizontally stretched within its flexbox, equal height. there must be a gap between child flexbox

Tags:

2

Answers


  1. 0

    Make below changes in your 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 */
}
    Login or Signup to reply.
  2. 0

    This is a place where CSS grid would be better than flexbox. It will make it easier for you to ensure that each item in the grid is the same size and will make it much easier for you to create a responsive design.

    .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>

    Responsive Example:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search