这是显示的正确用法:flex？

Question

这是一个正确的用例吗？

显示:在a上展开<ul>,然后每个<li>都有基于像素或百分比的宽度.

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

它似乎工作得很好,我不能让它与其他任何东西很好地工作,但它感觉不对,因为我实际上并没有在列表项上使用任何flex值.

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 for flex-basis.