Flexbox - justify-content center item arrangement

user_11557203 0
Viewed 109

The issue I am having right now is that justify-content:center will not align the item from left if the items are less than the width of the container.

Below is the output that I get and expect: enter image description here

Top is what I get now, here is the link to the jsfiddle.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  border:1px solid black;
  width:60%;
  justify-content:center;
}
.flex-item-blue {
  background-color: blue;
  padding: 10px;
}
.flex-item-grey {
  background-color: grey;
  padding: 10px;
}
<div class="flex-container">
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
</div>

Bottom is what I want the output to be like.

flexbox css
2 Answers

Here is another way using grid if you don't want side spaces on different window sizes: 

.flex-container {
  display: grid;
  font-size: 30px;
  text-align: center;
  border: 1px solid black;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
}

.flex-item-blue {
  background-color: blue;
  padding: 10px;
}

.flex-item-grey {
  background-color: grey;
  padding: 10px;
}
<div class="flex-container">
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
</div>

If you want the side space you can simply apply something like padding: 0 10px; to the main container.

user_171754410

you can achieve the second image by setting

flex-wrap: wrap; 
justify-content: flex-start;

EDIT

check out the link to the new answer https://jsfiddle.net/tcqpxf24/3/

What I did is add a second div to act as a parent for the flex children then styled it so that it's justified to the start to center it in the middle of the top div. I added justify-content: center; to the top div. It looks like that now! enter image description here

user_156802980
Related