html - 这是显示 :flex? 的正确用法吗

Question

这是一个正确的用例吗？

显示:在 <ul> 上 flex ，然后每个 <li>具有基于像素或基于百分比的宽度。

我想使用它的主要原因是我可以利用 align-items: center (垂直对齐)。

它似乎运行良好，我无法让它与其他任何东西一起很好地工作，但感觉不对，因为我实际上没有在列表项上使用任何 flex 值。

Answer 1

是的，这种用法是完全有效的。这只是意味着所有的 child 都会得到他们的默认行为，即 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 .