发布于 5 年前 作者 wangxuedongOvO 9948 次浏览 来自 问答

如题目? 真心不明白他们有什么不同,百度搜索了很多,仍然没有满意的答案,答案大多就是:inline-flex把容器作为内联块级弹性伸缩盒显示,而flex把容器作为弹性伸缩盒显示,但是他们到底有什么区别啊?求赐教。

2 回复

display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.

There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don’t actually have a flex layout. It is not clear what exactly you mean by “vertically align” or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish

stack overflow上copy的