Reputation: 25277

How can I have two rows of uneven, centered elements with flexbox?

This is the layout I am trying to create:

It is a grid of boxes:

The max amount of elements per box must be configurable (4, in this case, but should be able to be different amounts).
if the last row is not complete and has "orphans", the elements must remain centered, but with the same width as the other boxes.
The grid must use the whole width of its container. This means, no space surrounding the boxes outside, when the row is full.
Preferably must exist a way to set the gap between boxes

I thought the best tool for this would be flexbox but I have encountered the following problems:

My approach was this:

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 22%;
  height: 200px;
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

which yields this result:

Codepen link

Here there are several problems:

The last row is not centered.
I cannot set a fixed margin between boxes. I would like also that this margin is always the same, no matter how many elements a row can fit.
Minor inconvenience really, but the way to set the amount of max elements per row is flaky. I would have to make an operation dividing 100 / max, which may result in weird results (100 / 3 = 33.333333...).

How could I get a better result?

UPDATE

A requirement that I forgot to add:

The grid must use the whole width of its container. This means, no space surrounding the boxes outside, when the row is full.

Upvotes: 1

Answers (4)

Aleksandr Belugin

Reputation: 2227

UPDATE scale illustrating

We use css variables, such as --margin-right-value, --row-elements-number
We use classes form .boxes2 to .boxes20 to define different behavior of rows with different element numbers.
We wrap our .boxes<number> classes to simplify css, we match classes starting with boxes inside wrapper, optionaly, can maintain without wrapper.
Of course margin-top (can be used as variable as well if needed) and --margin-right-value can be specified within every .boxes<number> class.

Once written, can use classes after where you want.

Look into the snippet. Or https://jsfiddle.net/beluginni/kb8L71c3/

.wrapper [class*="boxes"] {
  margin-bottom: 30px; /* to separate visualy*/
}

:root {
  --margin-right-value: 10px; /* margin between elements in row, can be specified within each of boxes<n> classes */
}

.boxes2 { --row-elements-number: 2; }
.boxes3 { --row-elements-number: 3; }
.boxes4 { --row-elements-number: 4; }
.boxes5 { --row-elements-number: 5; }
.boxes6 { --row-elements-number: 6; }
.boxes7 { --row-elements-number: 7; }
.boxes8 { --row-elements-number: 8; }
.boxes9 { --row-elements-number: 9; }
.boxes10 { --row-elements-number: 10; }
.boxes11 { --row-elements-number: 11; }
.boxes12 { --row-elements-number: 12; }
.boxes13 { --row-elements-number: 13; }
.boxes14 { --row-elements-number: 14; }
.boxes15 { --row-elements-number: 15; }
.boxes16 { --row-elements-number: 16; }
.boxes17 { --row-elements-number: 17; }
.boxes18 { --row-elements-number: 18; }
.boxes19 { --row-elements-number: 19; }
.boxes20 { --row-elements-number: 20; }


.wrapper [class*="boxes"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  outline: dotted red 1px;
}


/*width: calc((100% - (<margin_value> * (<row_el_number> - 1))) / <row_el_number>)*/
.box {
  width: calc((100% - (var(--margin-right-value) * (var(--row-elements-number) - 1))) / var(--row-elements-number));
  height: 100px;
  box-shadow: 0 0 10px black inset;
  background: green;
}

.boxes2 .box:nth-child(n+3),
.boxes3 .box:nth-child(n+4),
.boxes4 .box:nth-child(n+5),
.boxes5 .box:nth-child(n+6),
.boxes6 .box:nth-child(n+7),
.boxes7 .box:nth-child(n+8),
.boxes8 .box:nth-child(n+9),
.boxes9 .box:nth-child(n+10),
.boxes10 .box:nth-child(n+11),
.boxes11 .box:nth-child(n+12),
.boxes12 .box:nth-child(n+13),
.boxes13 .box:nth-child(n+14),
.boxes14 .box:nth-child(n+15),
.boxes15 .box:nth-child(n+16),
.boxes16 .box:nth-child(n+17),
.boxes17 .box:nth-child(n+18),
.boxes18 .box:nth-child(n+19),
.boxes19 .box:nth-child(n+20),
.boxes20 .box:nth-child(n+21) {
  margin-top: 4%; /* margin between rows, can be represented as var and specified within each of boxes<n> classes */
}

.boxes2 .box:not(:nth-child(2n)):not(:last-child),
.boxes3 .box:not(:nth-child(3n)):not(:last-child),
.boxes4 .box:not(:nth-child(4n)):not(:last-child),
.boxes5 .box:not(:nth-child(5n)):not(:last-child),
.boxes6 .box:not(:nth-child(6n)):not(:last-child),
.boxes7 .box:not(:nth-child(7n)):not(:last-child),
.boxes8 .box:not(:nth-child(8n)):not(:last-child),
.boxes9 .box:not(:nth-child(9n)):not(:last-child),
.boxes10 .box:not(:nth-child(10n)):not(:last-child),
.boxes11 .box:not(:nth-child(11n)):not(:last-child),
.boxes12 .box:not(:nth-child(12n)):not(:last-child),
.boxes13 .box:not(:nth-child(13n)):not(:last-child),
.boxes14 .box:not(:nth-child(14n)):not(:last-child),
.boxes15 .box:not(:nth-child(15n)):not(:last-child),
.boxes16 .box:not(:nth-child(16n)):not(:last-child),
.boxes17 .box:not(:nth-child(17n)):not(:last-child),
.boxes18 .box:not(:nth-child(18n)):not(:last-child),
.boxes19 .box:not(:nth-child(19n)):not(:last-child),
.boxes20 .box:not(:nth-child(20n)):not(:last-child) {
  margin-right: var(--margin-right-value);
}

<div class="wrapper">
  <div class="boxes2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <div class="boxes4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <div class="boxes5">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes6">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes7">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes8">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes9">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes10">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes11">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes12">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes13">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes14">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes15">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes16">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes17">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes18">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes19">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes20">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

JSFieddle to play with different values

UPDATE better margin and .box width definition

Formulas to calculate .box width and margin between them:

If margin is known: width: calc((100% - (<margin_value> * (<row_elements_number> - 1))) / <row_elements_number>).

For 4 in a row .box width: calc((100% - (<margin_value> * (4 - 1))) / 4)
For 3 in a row .box width: calc((100% - (<margin_value> * (3 - 1))) / 3)
For 5 in a row .box width: calc((100% - (<margin_value> * (5 - 1))) / 5)

If .box width is known: margin-rigth: calc((100% - <.box_width_value> * <row_elements_number>) / (<row_elements_number> - 1)).

For 4 in a row margin-rigth: calc((100% - <.box_width_value> * 4) / (4 - 1))
For 3 in a row margin-rigth: calc((100% - <.box_width_value> * 3) / (3 - 1))
For 5 in a row margin-rigth: calc((100% - <.box_width_value> * 5) / (5 - 1))

css is simple

.box:not(:nth-child(<row-elements-number>n)):not(:last-child) {
  margin-right: <desired value>;
}

THE MAIN IDEA

is to make justify-content: center; and add margins to every child except :nth-child(<row-elements-number>n)):not(:last-child). In our case every 4th and last has no margin value.

Lets take margin-rigth: 4% => box-width is calc((100% - (4% * (4 - 1))) / 4)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/*width: calc((100% - (<margin_value> * (4 - 1))) / 4)*/
.box {
  width: calc((100% - (4% * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 4%; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 4%;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

UPDATE to illustrate adjustments

To control margin after last row replaced margin-bottom: value; in box class with

.box:nth-child(n + (<row_elements_number> + 1)) {
  margin-top: <desired_value>;
}

Case for 3 in a row

Lets take margin-right: 1% => .box width:calc((100% - (1% * (3 - 1))) / 3)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/*width: calc((100% - (<margin_value> * (3 - 1))) / 3)*/
.box {
  width: calc((100% - (1% * (3 - 1))) / 3);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+4) {
  margin-top: 1%; /*added*/
}

.box:not(:nth-child(3n)):not(:last-child) {
  margin-right: 1%;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Case for 5 in a row

Lets take margin-right: 5% => .box width: calc((100% - (5% * (5 - 1))) / 5)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (5 - 1))) / 5) */
.box {
  width: calc((100% - (5% * (5 - 1))) / 5);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+6) {
  margin-top: 5%; /*added*/
}

.box:not(:nth-child(5n)):not(:last-child) {
  margin-right: 5%;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Case for 4 in a row and small fixed gaps (margin-value is 4px)

=> .box width:calc((100% - (4px * (4 - 1))) / 4)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (4 - 1))) / 4) */
.box {
  width: calc((100% - (4px * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 4px; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 4px;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Case for 4 in a row and big fixed gaps (margin-value is 80px)

=> .box width:calc((100% - (80px * (4 - 1))) / 4)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (4 - 1))) / 4) */
.box {
  width: calc((100% - (80px * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 80px; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 80px;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Case for 4 in a row and fixed boxes width (60px)

=> margin-right: calc((100% - 60px * 4) / (4 - 1)).

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* margin-rigth: calc((100% - <.box_width_value> * 4) / (4 - 1)) */
.box {
  width: 60px;
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: calc((100% - 60px * 4) / (4 - 1)); /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: calc(33.33% - 80px);
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 2

Ashish chakravarti

Reputation: 69

Please try this - 
    <ul class="boxes">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
      </ul>

    ul.boxes {
      margin: 0 -10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    ul li.box {
      width: calc(100%/4 - 20px);
      background-color: green;
      height: 200px;
      margin: 0 10px 20px;
    }

Upvotes: -1

Priyanshu

Reputation: 59

Check here

.boxes {
  display: flex;
  flex-wrap: wrap;

  /*edited*/
  justify-content: center;
}
.box {
  width: 23%;
  height: 13rem;
  box-shadow: 0 0 10px black inset;
  background: green;

  /*edited*/
  margin: 1%; /* or .5rem*/
  border-radius: .2rem;

enter image description here

Thank you

Upvotes: 1

Muhammad Usman

Reputation: 215

You'll want to add the justify-content property to center the boxes and align-content should be space-around.

.boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
}

For the box styles, you'll need a margin around them to space them out.

Here's a codepen of the working version: https://codepen.io/usmanity/pen/zYGYrgZ?editors=0100

Upvotes: 1

How can I have two rows of uneven, centered elements with flexbox?

Answers (4)

Related Questions