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

如果将视口大小调整为大约1200px，则第四个项目将在其自己的单行上进行换行和增长。

为了防止挑出第四个项目，我可以写一个具有固定视口大小的@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项消耗容器中的所有可用空间。当它们共享一行时，可用空间在它们之间均匀分布。但是当第四个项目自己包装到第二行时，它占用了所有空间。

此外，如果您不希望这些项目缩小，您可以调整flex-shrink：

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

除以外，您使用的是百分比宽度，因此Flex项目会因此缩小。

Flexbox - 行中的单个项目

2 个答案: