这是使用display:flex的正确方式吗？

Question

这是一个正确的用例吗？

在

上使用display:flex，然后每个
• 都有像素或百分比宽度。
  
  我想使用它的主要原因是为了利用align-items:center（垂直对齐）。
  
  它似乎工作得很好，我无法找到其他任何更好的方法，但感觉不对，因为我实际上没有在列表项上使用任何flex值。

- Phill

---

使用 align-items: center 进行垂直居中对齐：https://dev59.com/bGMk5IYBdhLWcg3wtgMR#33049198 - Michael Benjamin

Answer 1

是的，这种用法是完全有效的。它只是意味着所有子元素都采用其默认行为，即 flex: 0 1 auto（语法是 flex: <flex-grow> <flex-shrink> <flex-basis>）。而这正好做到了你想要的，也就是简单地使所有项目适当对齐。您不希望任何项目增长 (flex-grow: 0)，如果有必要的话，它们应该全部缩小成相等的大小 (flex-shrink: 1) 并根据内容布局(flex-basis: auto)。

我建议阅读下面的页面，因为它解释得非常清楚： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 它解释了所有属性，提供了示例，并在必要时链接到最关键的 W3 资源，例如 http://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg 以获取 flex-basis 的信息。

- Paul Werelds