Flexbox - 行中的单个项目

Question

我有以下代码：http://codepen.io/anon/pen/rxZRJP?editors=1100

HTML：

<nav class="navigation">
  <li class="navigation-item" style="background: #003f8f">
    <a href="#">1</a>
  </li>
  <li class="navigation-item" style="background: #548122">
    <a href="#">2</a>
  </li>
  <li class="navigation-item" style="background: #f4a628">
    <a href="#">3</a>
  </li>
  <li class="navigation-item" style="background: #d21527">
    <a href="#">4</a>
  </li>
</nav>

CSS：

.navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.navigation-item {
  display: flex;
  flex: 1 1 20%;
  height: 190px;
  list-style-type: none;
  align-items: flex-end;
  justify-content: center;
  padding: 15px;
  margin: 15px;
}

.navigation-item a {
  color: #ffffff;
  text-decoration: none;
  font-size: 24px;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

如果您将视口大小调整为 1200 像素左右，则第四个项目将环绕并在其自己的单行上增长。

为防止第四项被挑出，我可以编写一个具有固定视口大小的@media-query，然后更改flex-basis 或给这些项目一个min-width。

所以我的问题是：
有没有更灵活的方法，不挑出任何项目？

编辑：
我希望物品能够包装，并且我希望物品能够填满所有可用空间。所以删除flex-grow 或flex-wrap 并不是一个真正的选择。

Answer 1

你可以从这个帖子中得到很多灵感：Flex-box: Align last row to grid

在你的情况下，你可以做很多小事以更简单的方式实现你想要的。

1/ 添加box-sizing: border-box，因此填充包含在定义的宽度中。更多解释见http://www.paulirish.com/2012/box-sizing-border-box-ftw/

2/ 使用calc() 去除宽度的边距，这样每个项目都适合行。

/* New box-sizing, so the padding and the border are included in element sizing */
* {
  box-sizing: border-box;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
}

.navigation-item {
  display: flex;
  
  /* Make the 4 elements to fit in a single line */
  flex: 1 1 calc(25% - 30px);
  height: 190px;
  padding: 15px;
  margin: 15px;
  list-style-type: none;
}

.navigation-item a {
  display: inline-block;
  margin: auto;
  
  color: #ffffff;
  text-decoration: none;
  font-size: 24px;
}

<nav class="navigation">
  <li class="navigation-item" style="background: #003f8f">
    <a href="#">1</a>
  </li>
  <li class="navigation-item" style="background: #548122">
    <a href="#">2</a>
  </li>
  <li class="navigation-item" style="background: #f4a628">
    <a href="#">3</a>
  </li>
  <li class="navigation-item" style="background: #d21527">
    <a href="#">4</a>
  </li>
</nav>

3/ 如果你想将第 4 个元素放在单独的行上，你可以改变 flex-basis

* {
  box-sizing: border-box;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
}

.navigation-item {
  display: flex;
   
  /* We make that only 3 elements fit in a line */
  flex: 1 1 calc(100% / 3 - 30px);
  height: 190px;
  padding: 15px;
  margin: 15px;
  list-style-type: none;
}

.navigation-item a {
  display: inline-block;
  margin: auto;

  color: #ffffff;
  text-decoration: none;
  font-size: 24px;
}

<nav class="navigation">
  <li class="navigation-item" style="background: #003f8f">
    <a href="#">1</a>
  </li>
  <li class="navigation-item" style="background: #548122">
    <a href="#">2</a>
  </li>
  <li class="navigation-item" style="background: #f4a628">
    <a href="#">3</a>
  </li>
  <li class="navigation-item" style="background: #d21527">
    <a href="#">4</a>
  </li>
</nav>

Answer 2

有没有更灵活的方法，不单选任何项目/让所有项目始终具有相同的宽度？

是的，从您的 flex 速记中删除 flex-grow: 1。

所以不要这样：

.navigation-item {  flex: 1 1 20%; }

试试这个：

.navigation-item {  flex: 0 1 20%; }

Revised Codepen

flex-grow: 1 规则告诉弹性项目消耗容器中的所有可用空间。当它们共享一行时，可用空间在它们之间平均分配。但是当第四个项目自行换行时，它会占用所有空间。

另外，如果你不希望项目缩小，你可以调整flex-shrink：

.navigation-item {  flex: 0 0 20%; }

除了您使用的是百分比宽度，因此弹性项目会因此而缩小。