【问题标题】:Is this a correct use for display:flex?这是 display:flex 的正确用法吗?
【发布时间】:2015-06-03 01:52:38
【问题描述】:

这是一个正确的用例吗?

显示:在<ul> 上弯曲,然后每个<li> 都有一个基于像素或百分比的宽度。

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

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

【问题讨论】:

标签: html css width flexbox


【解决方案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。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多