CSS3 Flex：flex-grow + justify-content？

Question

美好的一天，

我有一个问题

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

我想要 "flex-item(s)" 有全尺寸容器，同时 space 在它之间

<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

只需为子项使用边距：

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

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

.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/

CSS3 Flex：flex-grow + justify-content？

CSS3 Flex: flex-grow + justify-content?

html

css

flexbox

flex-grow