Align flex items like a grid using only flexbox CSS

user_13886927 0
Viewed 44

I am trying to left align items in a flexbox like so. However i cannot get them to align like in a grid display, ive tried all the flexbox properties but can only get it to work using a grid, but i cannot use a grid here.

enter image description here

Here is the code i have:

CSS

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align:left; 
}

I need all text to align left by the red line.

flexbox css
1 Answers

It is needed to fix the width of each items to align the position.

Try to add flex-basis css property to all child styles. So if the above style is something like .list-item, then add this style to all childs like...

.list-item > div {
  flex-basis: 25%;
}
user_82028500
Related