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

Steps to show submenus upon hovering over the main menu items

Tips for personalizing PNG images within an SVG element

Ensuring the child div's height does not overflow beyond the parent div

What could be the reason behind encountering an NaN error while using these particular functions?

Automatically populate email fields with pre-filled form data

How can I fetch a value from a database and set it as the selected option in a

The size of the dropdown adjusts according to the changes in the page size

Adding an image within the body of text in a Django model, where both the text and image coexist

Can adjusting the viewport by using touch controls alter the size of the viewing screen?

Position two in-line divs at the bottom, one on each side

Clicking on tabs causes their content to mysteriously vanish

Tips for aligning inputs vertically and stretching them horizontally with bootstrap flex only

The blur() function in -webkit-filter does not seem to function properly in Vue.js

As the browser window is resized, the gap between images widens while the images themselves decrease

Using jQuery to insert a new string into the .css file

Arranging navigation links around a centrally positioned navigation brand using Bootstrap

Is there a way to specifically dictate the order in which flexbox items expand or contract?

Trying to reduce the cursor box area within an A link containing a div box

JavaScript opacity adjustments not achieving desired outcome

It is not possible to delete a class from an element once it has been added