html - CSS3 flex : flex-grow + justify-content?

Question

你好，

我有一个问题

我可以同时使用 flex 和 justify-content 吗？

我希望“flex-item(s)”有全尺寸的容器，同时在它之间有空间

<ul class="flex-container space-between">
  <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>
</ul>

http://jsfiddle.net/7yttrtm4/

Answer 1

只需为 child 使用边距:

.flex-item {
    margin: 0 10px;
}

要删除容器左侧和右侧的空间，请使用第一个和最后一个子选择器:

.flex-item:first-child{
    margin-left: 0;
}

.flex-item:last-child{
    margin-right: 0;
}

参见 http://jsfiddle.net/7yttrtm4/2/

或向容器添加负边距:

.flex-container {
    margin: 0 -10px;
}

参见:http://jsfiddle.net/7yttrtm4/4/