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

How can you center popup windows launched from the main window using jquery?

Is there a way to change an HTML document into a Word file?

Tips for optimizing Markdown to HTML conversion for improved SEO in Pagedown editor

Chrome on IOS: Experiencing screen freezing while scrolling

Utilizing Node.JS Nodemailer for sending emails with extensive HTML code

Why is my <a> element not functioning properly?

Angular 4 allows the addition of an image from right to left upon clicking

Saving HTML form field data through erb for persistent storage

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

What steps can be taken to automatically set a button in a navigation bar to active when its corresponding route is clicked on?

Struggling with html code?

The waveform's bottom appears distorted when using Bootstrap

JQuery Mobile header style vanishing when applied to a page generated dynamically

Having difficulty automating the selection of dropdown menu using Selenium in Python

disable caching for xmlhttp request

What could be causing the misalignment of these two divs?

Ajax facilitates the loading of multiple containers

MySQL automatically inserts a null record if no value is provided

The event listener for jQuery's document.ready doesn't trigger, rendering all jQuery functions ineffective

Which CSS preprocessor is the best choice for WordPress: SASS or