这是 display:flex 的正确用法吗?
Is this a correct use for display:flex?
这是一个正确的用例吗?
显示:在 <ul>
上弯曲,然后每个 <li>
都有基于像素或百分比的宽度。
我想使用它的主要原因是我可以利用 align-items: center
(垂直对齐)。
它似乎运行良好,但我无法让它与其他任何东西一起很好地工作,但感觉不对,因为我实际上并没有在列表项上使用任何弹性值。
是的,这种用法完全有效。这只是意味着所有 children 都获得它们的默认行为,即 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
。
这是一个正确的用例吗?
显示:在 <ul>
上弯曲,然后每个 <li>
都有基于像素或百分比的宽度。
我想使用它的主要原因是我可以利用 align-items: center
(垂直对齐)。
它似乎运行良好,但我无法让它与其他任何东西一起很好地工作,但感觉不对,因为我实际上并没有在列表项上使用任何弹性值。
是的,这种用法完全有效。这只是意味着所有 children 都获得它们的默认行为,即 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
。