1

I have a flexbox. Its contents are NxN squares. I want the container to fit as many of these squares as possible given the display width. I want the flexbox to be center-aligned on the page.

However the problem is when I use

justify-content: center

image: justify-content: center

then the last row is not aligned to the left. However if I change to

justify-content: left

image: justify-content: left

then the entire container is no longer displayed center-aligned on the page. Can I somehow achieve a mix of two, so that is this example I would have centrally aligned 5 items, but the last row would be aligned to the first item in previous rows?

Minimal repro:

<style>
  div { display: flex; flex-wrap: wrap; justify-content: center; }
  i { display: block; width: 300px; height: 300px; background: black; margin: 10px; }
</style>
<div>
  <i></i> <i></i> <i></i> <i></i> <i></i>
  <i></i> <i></i> <i></i>
</div>
Bob
  • 11
  • 2
  • Hi and Welcome to SO. Please add a minimal reproduicable code snippet (ctrl + m) showing your code and issue (focus on being minimal). – tacoshy Mar 21 '21 at 14:22
  • Thanks. Repro added. – Bob Mar 21 '21 at 14:25
  • Stupid question, but why not just center align the parent element? :D – Roko C. Buljan Mar 21 '21 at 14:27
  • I'm sorry but i really don't understand the problem. I mean if you use `justify-content: left;` then it is aligned on the left and if you use `justify-content: center;` it's centered. – GucciBananaKing99 Mar 21 '21 at 14:27
  • I want however many elements fit to be centrally-aligned. If I use `justify-content: left;` then my 5 elements (could be 4, or could be 6 etc depending on the resolution) are not aligned centrally in the parent. And I can't center align the parent element (or at least I don't know how to do it), since the flexbox occupies 100% width. – Bob Mar 21 '21 at 14:29

2 Answers2

2

The layout you're building is a pretty standard grid. CSS grid is going to be a better fit than flexbox.

By using auto-fit for the columns and setting each to a fixed size, it will fit as many columns as it can within the container. justify-content: center will center your columns but content will still move across those columns from left to right.

Example:

div {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, 160px);
    justify-content: center;
}

span {
    background: red;
    display: block;
    height: 160px;
}
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
Nathan Dawson
  • 16,455
  • 3
  • 44
  • 51
0

Found the answer here

Adding below CSS works

div:after {
    content: '';
    flex: auto;
    margin: 10px;
    max-width: 300px;
}

But, It breaks the responsiveness for Ipad and mobile screens, You can fix that by adding the above CSS only for big screens using a media query.

I would not recommend this, If possible switch flex-box to grid as stated by @nathan

Sameer
  • 3,505
  • 3
  • 13
  • 33