你的位置: 前端博客 > CSS3 > CSS3弹性盒flexbox > 居中对齐演示

.flex-container{padding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;justify-content:space-around}
.flex-item{background:tomato;padding:5px;width:200px;height:150px;margin-top:10px;line-height:150px;color:white;font-weight:bold;font-size:3em;text-align:center}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>

返回CSS3弹性盒模型的完整教程