Maintaining an even distribution of flex children on each line as they wrap to the next line

Question

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique.

For example, let's say I have a flexbox with 6 elements. When it wraps, I would like to have 3 elements on the first line and 3 on the second, or for both lines' total width to be approximately equal.

I don't want to resize the children or compromise the functionality of flexbox.

Currently, I am only able to achieve 5 elements on the first line and one on the last line.

ul {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

You can view an example on jsfiddle here: https://jsfiddle.net/yfj2g7wx/

I believe that maintaining an even distribution across lines could enhance the visual appeal rather than wrapping elements individually.

Is there a solution to achieve this?

html css flexbox

Answer 1

Answer №1

To control the size of flex items at different screen sizes, you can utilize media queries. For instance, at a specific breakpoint, you might want to set flex-basis: 33% to have three items on each line.

@media screen and ( max-width: 900px ) {
  li { flex-basis: 33%; }                    /* displaying three items per line */
}

@media screen and ( max-width: 600px ) {
  li { flex-basis: 50%; }                    /* showing two items per line */
}

@media screen and ( max-width: 300px ) {
  li { flex-basis: 100%; }                   /* one item per line */
}

Check out the jsFiddle example here

Answer 2

To control the size of flex items at different screen sizes, you can utilize media queries. For instance, at a specific breakpoint, you might want to set flex-basis: 33% to have three items on each line.

@media screen and ( max-width: 900px ) {
  li { flex-basis: 33%; }                    /* displaying three items per line */
}

@media screen and ( max-width: 600px ) {
  li { flex-basis: 50%; }                    /* showing two items per line */
}

@media screen and ( max-width: 300px ) {
  li { flex-basis: 100%; }                   /* one item per line */
}

Check out the jsFiddle example here

Answer 3

Answer №2

To ensure an equal number of elements per row, divide them into two sets of three elements each. This way, you will always have either a complete 6-element row or two rows with 3 elements each. This arrangement also maintains a nice symmetrical look with 'space-between' on both rows. I made some modifications to your Fiddle:

Separated the last 3 <li>s into a new <ul>.
Wrapped both <ul>s in a <section>.
Turned the <section> into a flex container.

Applies flex to both <ul>s.

section {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

Fiddle

Answer 4

To ensure an equal number of elements per row, divide them into two sets of three elements each. This way, you will always have either a complete 6-element row or two rows with 3 elements each. This arrangement also maintains a nice symmetrical look with 'space-between' on both rows. I made some modifications to your Fiddle:

Separated the last 3 <li>s into a new <ul>.
Wrapped both <ul>s in a <section>.
Turned the <section> into a flex container.

Applies flex to both <ul>s.

section {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

Fiddle

Maintaining an even distribution of flex children on each line as they wrap to the next line

Answer №1

Check out the jsFiddle example here

Answer №2

Similar questions

Using javascript, add text to the beginning of a form before it is submitted

``There seems to be an issue with implementing the SlideDown feature in JavaScript

The CSS properties of a div element include the :before pseudo-element with a "shape" style that does

Managing the vertical dimensions of a div

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

Setting the width of a div element dynamically according to its height

Combining HTML, PHP, and Ajax within a single document

Ensure that the headers of the table are in perfect alignment with the

What is the best way to make sure that the parent div of an svg shows its shadow on top of the svg itself?

flawless approach to showcasing visual content

Display the HTML/CSS layout following the JavaScript window.open action

Adjust the parent div's background when hovering over it

Setting a CSS grid column to have a minimum width of `max-content` and a specific

Organize the Div elements in the form of a message

Steps for closing the menu by clicking on the link

When the content in the div exceeds its boundaries, it causes it to overlap with

What is the best way to navigate a carousel containing images or divs using arrow keys while maintaining focus?

Decorate the elements that do not contain a specific child class

Using Javascript to access a website from a Windows Store application

Creating crawlable AMP versions of Angular websites