Create a dynamic flex box layout to achieve the "space-between" effect with variable-sized items

Question

Create a dynamic flex box layout to achieve the "space-between" effect with variable-sized items

I am trying to achieve the same effect as justify-content and align-items with the value "space-between" on my flex box, but I am facing a challenge because there is no static width/height for the flexbox. Using margins adds space to all sides, whereas I only want space on the sides where flex items meet.

My ultimate goal is to align the very left and very right sides of the flex box's content with the division above it, while still having some space between the items. How can I accomplish this?

Since more flex items will be added/removed dynamically, I need a solution that does not limit support on just the three boxes used in the demonstration below:

div {
  text-align: center;
  border: 1px solid black;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

#container div {
  flex: 1 1 300px;
  margin: 5px;
}

<div>Flex item sides should align with this division's sides</div>
<br>
<div id="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

html css flexbox

Answer 1

Answer №1

There are essentially only two ways to achieve that effect: one is using margins or borders along with an additional wrapper to fill the gap.

Snippet:

div {
  text-align: center;
  border: 1px solid black;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  border: none;
  margin: -5px 0 0 -5px;      /*  filling the gap  */
}

#container .wrapper div {
  flex: 1 1 300px;
  margin: 5px 0 0 5px;        /*  5px spacing between items  */
}

#container2 .wrapper div {
  flex: 1 1 100px;
  margin: 5px 0 0 5px;        /*  5px spacing between items  */
}

<div>Flex item sides should align with this division's sides</div>
<br>
<div id="container">
  <div class="wrapper">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
  </div>
</div>

<br>
<div id="container2">
  <div class="wrapper">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
    <div>Box 6</div>
    <div>Box 7</div>
    <div>Box 8</div>
  </div>
</div>

Answer 2

There are essentially only two ways to achieve that effect: one is using margins or borders along with an additional wrapper to fill the gap.

Snippet:

div {
  text-align: center;
  border: 1px solid black;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  border: none;
  margin: -5px 0 0 -5px;      /*  filling the gap  */
}

#container .wrapper div {
  flex: 1 1 300px;
  margin: 5px 0 0 5px;        /*  5px spacing between items  */
}

#container2 .wrapper div {
  flex: 1 1 100px;
  margin: 5px 0 0 5px;        /*  5px spacing between items  */
}

<div>Flex item sides should align with this division's sides</div>
<br>
<div id="container">
  <div class="wrapper">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
  </div>
</div>

<br>
<div id="container2">
  <div class="wrapper">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
    <div>Box 6</div>
    <div>Box 7</div>
    <div>Box 8</div>
  </div>
</div>

Answer 3

Answer №2

Are you looking for this specific layout?

#container {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid black;
      }
      
      #container div {
        flex: 1 1 300px;
        margin: 5px 0;
        padding: 10px;
        border: 1px solid black;
        text-align: center;
      }
      
      #container div:first-of-type{
        margin-top:0;
      }
      
      #container div:last-of-type{
        margin-bottom:0;
      }

<div id="container">
      <div>
        Box 1
      </div>
      <div>
        Box 2
      </div>
      <div>
        Box 3
      </div>
    </div>

If this is what you need, simply remove the margin-top from the first flex item (targeted with first-of-type) and the margin-bottom from the last item (targeted with last-of-type).

Answer 4

Are you looking for this specific layout?

#container {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid black;
      }
      
      #container div {
        flex: 1 1 300px;
        margin: 5px 0;
        padding: 10px;
        border: 1px solid black;
        text-align: center;
      }
      
      #container div:first-of-type{
        margin-top:0;
      }
      
      #container div:last-of-type{
        margin-bottom:0;
      }

<div id="container">
      <div>
        Box 1
      </div>
      <div>
        Box 2
      </div>
      <div>
        Box 3
      </div>
    </div>

If this is what you need, simply remove the margin-top from the first flex item (targeted with first-of-type) and the margin-bottom from the last item (targeted with last-of-type).

Answer 5

Answer №3

Remove the padding from the #container div and instead apply it to the inner div using #container div.

Ensure that you set the margin-bottom for the inner elements, and don't forget to remove the margin-bottom from the last inner element using :last-child.

Custom Snippet Example

div {
  text-align: center;
  border: 1px solid black;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

#container div {
  flex: 1 1 300px;
  margin: 0 0 15px;
  padding: 10px;
}

#container div:last-child {
  margin: 0;
}

<div id="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

Answer 6

Remove the padding from the #container div and instead apply it to the inner div using #container div.

Ensure that you set the margin-bottom for the inner elements, and don't forget to remove the margin-bottom from the last inner element using :last-child.

Custom Snippet Example

div {
  text-align: center;
  border: 1px solid black;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

#container div {
  flex: 1 1 300px;
  margin: 0 0 15px;
  padding: 10px;
}

#container div:last-child {
  margin: 0;
}

<div id="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

Answer 7

Answer №4

Does this meet your requirements?

div {
  text-align: center;
  padding: 10px;
  border: 1px solid black;
}

#container {
  display: flex;
}

#container div {
  flex: 1 1 300px;
  margin-left: 5px;
}

<div id="container">
  <div>
    Box 1
  </div>
  <div>
    Box 2
  </div>
  <div>
    Box 3
  </div>
</div>

If this solution does not address your question, kindly provide us with a revised query.

Answer 8

Does this meet your requirements?

div {
  text-align: center;
  padding: 10px;
  border: 1px solid black;
}

#container {
  display: flex;
}

#container div {
  flex: 1 1 300px;
  margin-left: 5px;
}

<div id="container">
  <div>
    Box 1
  </div>
  <div>
    Box 2
  </div>
  <div>
    Box 3
  </div>
</div>

If this solution does not address your question, kindly provide us with a revised query.

Create a dynamic flex box layout to achieve the "space-between" effect with variable-sized items

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

div containing various images of varying sizes

What is the best way to adjust the margins of my div based on the width of the webpage?

Exploring ways to traverse a foreach loop based on a specific array size

Creating a dynamic Bootstrap 4 hover effect for collapsible elements with numerous items

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

Unable to load CSS background image and update code

Triggering PHP functionality in JavaScript when a button is clicked

Is it possible to add border radius to the scrollbar in Firefox?

Ways to showcase flair in PHP code such as this

Positioning elements on the web page using CSS tiles

What is the best way to trigger the closing of a Bootstrap (version 5.2) Modal using JavaScript

Connect an existing function to JQuery animation

The Bootstrap 4 accordion won't stay closed and keeps popping open when I try to close

How can I disable auto-fill for password input fields? Setting autocomplete="off" doesn't seem to be working

Creating an interactive form with file uploads using JQuery Mobile

Exploring the Interaction of Users with HTML Table Cell <td>

Injecting a full browser-screen DIV into the body of the webpage

Create a recursive CSS style for an angular template and its container

Discover the significance of a data attribute's value for effective comparisons

The voting system will increase or decrease by 1 to 5 during each round