Arranging a list using Flexbox with equal spacing between elements in each row containing three items

Question

Arranging a list using Flexbox with equal spacing between elements in each row containing three items

I'm struggling with aligning a flexbox list. I have a row of 3 elements, but when there are only 2 elements on the row, there's a gap in the middle.

My goal is to have a row with 2 elements look like x x o. However, my current code displays the elements as x o x. Additionally, I've noticed that the elements aren't perfectly centered within their container.

Here's an example:

View Flexbox alignment issue

My ul is configured as follows:

 display:flex;
    flex-flow: row wrap;
    width:100%;
    justify-content: space-between;
    align-items: center;

And the li has the following styles:

{
    color:black;
    font-size:16px;
    margin-bottom:20px;
    width: calc(100% / 3);

html css list flexbox alignment

Answer 1

Answer №1

Utilizing the space-between attribute is responsible for the gap in the middle. To resolve this issue, simply allow that specific row to adhere to the default alignment without any additional styling. This will ensure that the elements align from left to right. Alternatively, if you wish to maintain a particular order, utilizing a grid layout would be more efficient and easier to implement.

ul {
 display: grid;
 grid-template-columns: auto auto auto;
}

By implementing this code, the elements will follow a structured arrangement as desired.

If you prefer to continue using flexbox for this specific row:

ul{
display: flex;
flex-direction: row;
}

li{
width: calc(100% / 3);
}

Answer 2

Utilizing the space-between attribute is responsible for the gap in the middle. To resolve this issue, simply allow that specific row to adhere to the default alignment without any additional styling. This will ensure that the elements align from left to right. Alternatively, if you wish to maintain a particular order, utilizing a grid layout would be more efficient and easier to implement.

ul {
 display: grid;
 grid-template-columns: auto auto auto;
}

By implementing this code, the elements will follow a structured arrangement as desired.

If you prefer to continue using flexbox for this specific row:

ul{
display: flex;
flex-direction: row;
}

li{
width: calc(100% / 3);
}

Arranging a list using Flexbox with equal spacing between elements in each row containing three items

Answer №1

Similar questions

Storing JavaScript Array for Future Use in a Separate File

Adapt the dimensions of the iframe to perfectly match the content within

Display the accurate duration based on the dates selected in an HTML form automatically

Sequentially iterate through elements based on their Data attributes

Vue JS: Extracting both the unique ID and value from an array of input simultaneously

Ensure that a select input, dynamically generated, is marked as 'required' only when other inputs have been filled out

Ways to display or conceal an anchor tag depending on the database value

Adding and removing form fields in a table dynamically using AngularJS

Seamless transition of lightbox fading in and out

_my_custom_styles.scss are being overridden by reboot.scss

Expanding a website banner slide to fill the entire width of the page

Styling input groups with box shadows in Bootstrap 4

Attempting to transmit multiple variables

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data

Combining 8 items into groups of 3, 3, and 2 using Python loops

Can I construct an html table-esque layout employing fabric js?

What is the best method for utilizing the CSS :target selector in order to generate a versatile modal box?

What steps can be taken to update the ID's of <tr> and <td> elements within a table after deleting a row?

Design a dynamic advertisement page using HTML and Bootstrap to ensure responsiveness

CSS: customize the color of a highlighted row within a table