flexboxで要素を真ん中に寄せて並べる

justify-content: center;とjustify-content: space-between;を指定する場合の例

デモはこちら

CSS

.flex1 {
  display: flex;
  display: -webkit-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  justify-content: center;
  -webkit-justify-content: center;
}

.flex2 {
  display: flex;
  display: -webkit-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.item {
    width: 25%;
    height: 100px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}
.flex1 .number {
    background: #ff9999;
    height: 100%;
}
.flex2 .number {
    background: #999999;
    height: 100%;
}

HTML

<h2>
    justify-content: center;
</h2>
<div class="flex1">
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
</div>

<h2>
    justify-content: space-between;
</h2>
<div class="flex2">
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
    <div class="item">
        <div class="number">1</div>
    </div>
</div>