Question

美好的一天，

我有一个问题

我可以立即使用 flex 和对齐内容吗？

我想要＆＃34; flex-item（s）＆＃34;拥有全尺寸容器并同时在它之间留出空间

<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;
}

删除容器左侧和右侧的空间使用first-last-child子选择器：

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

1 个答案: