CODEWITHSUNDEEP
cssflexbox
Uriel
Uriel

Reputation: 206

Align flex items like a grid using only flexbox CSS

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.

Upvotes: 2

Views: 56

Answers (1)

Derek Wang
Derek Wang

Reputation: 10204

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%;
}

Upvotes: 5

Related Questions