Horizontally centering a variable number of fixed size list items

Question

I would love some eyes and opinions in this problem that I am facing with flexbox and a grid. I will have a variable number of items in a list (like in an image gallery), but the size of each item would be fixed. Now, I need to horizontally-center the list items, and have them always be aligned.

JSFiddle

 html {
   box-sizing: border-box;
 }
 
 p {
   padding: 1em;
 }
 
 .wrapper {
   max-width: 100%;
   min-height: 500px;
   padding: 2em 0;
   background: papayawhip;
   border: 1px solid orange;
   overflow: hidden;
   display: flex;
   justify-content: center;
 }
 
 ul {
   display: flex;
   background: mistyrose;
   width: 100%;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin: 1em;
   border: 1px solid blue;
   padding: 0;
 }
 
 li {
   display: block;
   background: indianred;
   width: 200px;
   height: 200px;
   margin: .1em;
   /* padding: 1em; */
   color: white;
   font-size: 2rem;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   align-self: stretch;
   border: 1px solid azure;
 }
 
 li div {
   display: inline-block;
 }

<div class="wrapper">

  <ul>

    <li>
      <div>
        First
      </div>
    </li>

    <li>
      <div>
        Second
      </div>
    </li>

    <li>
      <div>
        Third
      </div>
    </li>

    <li>
      <div>
        Fourth
      </div>
    </li>

    <li>
      <div>
        Fifth
      </div>
    </li>

  </ul>
</div>

I've been struggling to get it to work like that with Flexbox and was wondering if this would be a case where I need to use CSS Grid instead.

The desired behavior can be seen in the image below. Another way to think about the desired behavior is justify-content: flex-start but the whole thing (from left-edge of left most list item to right edge of right-most list item) centered.

If this can't be achieved with Flexbox, is CSS grid then the way to go? Or can the same effect be achieved in a different way?

with `justify-content: space-around`, the second row loses alignment with the first row. The ideal is if `justify-content: flex-start` could be centered.. — geoboy, Jan 16 '18 at 03:16
ofcourse, [heres a thread discussing the topic](https://css-tricks.com/forums/topic/css-flexbox-left-align-the-space-around/) — Ryan Turnbull, Jan 16 '18 at 03:22
hmm.. that thread makes it sound like flexbox can't achieve this. i wonder how can it be achieved with CSS Grid instead? — geoboy, Jan 16 '18 at 03:28
FYI, as the `li` is set to `display: flex`, the `display: inline-block` on its `div` child doesn't have any effect: https://stackoverflow.com/questions/39261797/what-are-allowed-values-of-the-display-property-for-a-flex-item-layout-of-fl/39261922#39261922 — Asons, Jan 16 '18 at 08:00

score -1 · Answer 1 · answered Jan 16 '18 at 03:14

What you're looking to do is add justify-content: center and align-items: center to the ul in addition to the li elements. This can be seen in the following, and this updated fiddle.

html {
  box-sizing: border-box;
}

p {
  padding: 1em;
}

.wrapper {
  width: 100%;
  min-height: 500px;
  padding: 2em 0;
  background: papayawhip;
  border: 1px solid orange;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  background: mistyrose;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 1em;
  border: 1px solid blue;
  padding: 0;
}

li {
  display: block;
  background: indianred;
  width: 200px;
  height: 200px;
  margin: .1em;
  /* padding: 1em; */
  color: white;
  font-size: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border: 1px solid azure;
}

li div {
  display: inline-block;
}


/* li:first-child {
 padding:  
} */

<div class="intro">
  <p>
    My aim is to horizontally center the variable number of red boxes in the display within the following constraints:
    <br/> 1. RedBox width stays the same.
    <br /> 2. All boxes should be aligned, like a grid.
    <br /> 3. Each row of the boxes should have same starting point (as a result of 2)
    <br/>

    <em>Like shown here: <a href="">Desired Behavior</a> :: So can this be solved via Flexbox or do I need CSS Grid?</em>

  </p>
</div>

<div class="wrapper">

  <ul>

    <li>
      <div>
        First
      </div>
    </li>

    <li>
      <div>
        Second
      </div>
    </li>

    <li>
      <div>
        Third
      </div>
    </li>

    <li>
      <div>
        Fourth
      </div>
    </li>

    <li>
      <div>
        Fifth
      </div>
    </li>

  </ul>
</div>

Hope this helps! :)

thanks for the quick answer, but note that here when the screen gets shorter, the boxes in the second row are not aligned with the first row anymore. :/ the ideal would be the `justify-content: flex-start` behavior but the whole thing centered. — geoboy, Jan 16 '18 at 03:17

Horizontally centering a variable number of fixed size list items

1 Answers1