What is the best method for adding space between elements in flexbox layout?

Question

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxes don't stretch horizontally as intended.

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

My goal is to have all images/iframes (embedded videos) with equal width, fully stretched horizontally within their respective flexboxes, and equal height. And there should be a visible gap between the child flexboxes.

html css flexbox

Answer 1

Answer №1

If you're looking for a more efficient way to create a grid layout, CSS grid is the way to go over flexbox. It will streamline the process of ensuring uniform item sizes and simplify responsive design implementation.

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

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

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

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

<article>
  <h2>
    Latest Updates
  </h2>
  <div class="grid-layout">
    <!-- Update 1 -->
    <article>
      <a href="#" title="Update 1 Title" target="_blank">
        <img src="#" alt="Update 1 Image">
        <p>
          Update 1 Description
        </p>
      </a>
    </article>
    <article>
      <a href="#" title="Update 2 Title" target="_blank">
        <img src="#" alt="Update 2 Image">
        <p>Update 2 Description</p>
      </a>
    </article>
    <!-- Update 3 -->
    <article>
      <iframe src="#" title="Video Player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
      <a href="#" title="Update 3 Title" target="_blank">
        <p>
          Watch: Update 3 Content
        </p>
      </a>
    </article>
    <!-- Update 4 -->
    <article>
      <a href="#" title="Update 4 Title" target="_blank">
        <img src="#" alt="Update 4 Image" title="Update 4 Title">
        <p>
          Update 4 Description
        </p>
      </a>
    </article>

  </div>
</article>

Responsive Layout:

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

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

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

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

<article>
  <h2>
    Latest Updates
  </h2>
  <div class="grid-layout">
    <!-- Update 1 -->
    <article>
      <a href="#" title="Update 1 Title" target="_blank">
        <img src="#" alt="Update 1 Image">
        <p>
          Update 1 Description
        </p>
      </a>
    </article>
    <article>
      <a href="#" title="Update 2 Title" target="_blank">
        <img src="#" alt="Update 2 Image">
        <p>Update 2 Description</p>
      </a>
    </article>
    <!-- Update 3 -->
    <article>
      <iframe src="#" title="Video Player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
      <a href="#" title="Update 3 Title" target="_blank">
        <p>
          Watch: Update 3 Content
        </p>
      </a>
    </article>
    <!-- Update 4 -->
    <article>
      <a href="#" title="Update 4 Title" target="_blank">
        <img src="#" alt="Update 4 Image" title="Update 4 Title">
        <p>
          Update 4 Description
        </p>
      </a>
    </article>

  </div>
</article>

Answer 2

If you're looking for a more efficient way to create a grid layout, CSS grid is the way to go over flexbox. It will streamline the process of ensuring uniform item sizes and simplify responsive design implementation.

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

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

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

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

<article>
  <h2>
    Latest Updates
  </h2>
  <div class="grid-layout">
    <!-- Update 1 -->
    <article>
      <a href="#" title="Update 1 Title" target="_blank">
        <img src="#" alt="Update 1 Image">
        <p>
          Update 1 Description
        </p>
      </a>
    </article>
    <article>
      <a href="#" title="Update 2 Title" target="_blank">
        <img src="#" alt="Update 2 Image">
        <p>Update 2 Description</p>
      </a>
    </article>
    <!-- Update 3 -->
    <article>
      <iframe src="#" title="Video Player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
      <a href="#" title="Update 3 Title" target="_blank">
        <p>
          Watch: Update 3 Content
        </p>
      </a>
    </article>
    <!-- Update 4 -->
    <article>
      <a href="#" title="Update 4 Title" target="_blank">
        <img src="#" alt="Update 4 Image" title="Update 4 Title">
        <p>
          Update 4 Description
        </p>
      </a>
    </article>

  </div>
</article>

Responsive Layout:

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

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

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

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

<article>
  <h2>
    Latest Updates
  </h2>
  <div class="grid-layout">
    <!-- Update 1 -->
    <article>
      <a href="#" title="Update 1 Title" target="_blank">
        <img src="#" alt="Update 1 Image">
        <p>
          Update 1 Description
        </p>
      </a>
    </article>
    <article>
      <a href="#" title="Update 2 Title" target="_blank">
        <img src="#" alt="Update 2 Image">
        <p>Update 2 Description</p>
      </a>
    </article>
    <!-- Update 3 -->
    <article>
      <iframe src="#" title="Video Player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
      <a href="#" title="Update 3 Title" target="_blank">
        <p>
          Watch: Update 3 Content
        </p>
      </a>
    </article>
    <!-- Update 4 -->
    <article>
      <a href="#" title="Update 4 Title" target="_blank">
        <img src="#" alt="Update 4 Image" title="Update 4 Title">
        <p>
          Update 4 Description
        </p>
      </a>
    </article>

  </div>
</article>

Answer 3

Answer №2

Update

I completely agree with @jme11's recommendation to utilize flexbox, although grid would be more effective in this scenario.

To implement the necessary changes in your CSS coding, follow these instructions:

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

.latest-news-format div img {
  object-fit: cover;
  height: 240px;
  /* Ensure the p tag accommodates either 2 or 3 lines by specifying a specific height */
  width: 100%;
  /* Adjust width as needed, utilizing width over max-width */
}

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

Answer 4

Update

I completely agree with @jme11's recommendation to utilize flexbox, although grid would be more effective in this scenario.

To implement the necessary changes in your CSS coding, follow these instructions:

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

.latest-news-format div img {
  object-fit: cover;
  height: 240px;
  /* Ensure the p tag accommodates either 2 or 3 lines by specifying a specific height */
  width: 100%;
  /* Adjust width as needed, utilizing width over max-width */
}

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

What is the best method for adding space between elements in flexbox layout?

Answer №1

Responsive Layout:

Answer №2

Similar questions

Blog entries alternating between a pair of distinct hues

An elementary React project facing compilation issues

Step-by-step guide on inserting an image directly into an HTML file without utilizing LinkedResource or CDO

Obtaining a background image within a keyframe

Using Conditional Tags for CSS Display

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

What is the best method to transfer and incorporate essays and information onto my HTML page?

New messages are revealed as the chat box scrolls down

Retrieve Object Key in Angular 7

Utilizing CSS for a responsive background image

Adjusting the height of an element as you scroll will activate the scroll event

How can I implement user-specific changes using Flask?

Display an empty string when a value is NULL using jQuery's .append() function

Bootstrap image with simplistic arrow indicators

What is the best way to position an SVG background image at the bottom of a container?

Preventing AngularJS from Ignoring HTML Elements

Aligning inline form controls with Bootstrap and Syncfusion widgets

Using a variable to store the value of the id attribute in HTML code

What causes the offsetWidth attribute to be zero in an array of elements within the DOM?

Start the CSS3 animation in reverse right away