1

I have a flex row that should contain three columns. Three columns per row looks good, but when having two columns in one row, second column is pushed to the right side of the row, as can be seen in the image below.

enter image description here

From the image, red lines shows how I would like all columns to be placed.

Row has this CSS:

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

While columns has this CSS:

display: flex;
flex-direction: column;

In addition, using Bootstrap 4, row uses row class, columns uses col classes

How can I keep two columns in a row at the same positions as it would be with three columns?

Wolf
  • 75
  • 9

1 Answers1

2

To do this with flexbox you can try using justify-content: flex-start;. To get 3 columns per row, apply flex-basis: ~30%; to the flex items. Something like this:

 .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.block {
  background-color: grey;
  flex-basis: 30%;
  margin: 5px;
}

JSfiddle

Hope it helps!

Community
  • 1
  • 1
Dostrelith
  • 922
  • 5
  • 13