弹性框项目的显示属性的使用

Question

更改弹性框项目的显示属性有什么好处或理由吗？

特别是，我对使用display:block和感兴趣display:inline-block

Answer 1

从规格来看：

\n\n

\n

Flex 项目的显示值是块化的：如果生成 Flex 容器的元素的流入子元素的指定显示是内联级值，则它将计算为其块级等效值。（有关此类显示值转换的详细信息，请参阅 CSS2.1\xc2\xa79.7 [CSS21] 和 CSS Display [CSS3-DISPLAY]。）

\n

\n\n

所以基本上，设置inline-blockorblock不会执行任何操作，因为两者都会被计算，block但您可以设置tableorinline-table并且您的弹性项目将表现为表格。如果你设置inline-grid或则同样的事情grid

\n\n

\r\n

\r\n

.box {\r\n  display: flex;\r\n  margin:5px;\r\n}\r\n\r\n.box>div {\r\n  height: 50px;\r\n  width: 100%;\r\n  background: red;\r\n  display: grid;\r\n  grid-template-columns: 200px 1fr;\r\n  grid-template-rows: 1fr;\r\n  grid-gap: 20px;\r\n}\r\n\r\nspan {\r\n  border: 2px solid green;\r\n}

\r\n

<div class="box">\r\n  <div>\r\n    <span></span>\r\n\r\n    <span></span>\r\n  </div>\r\n</div>\r\n\r\n<div class="box">\r\n  <div style="display:inline-grid;">\r\n    <span></span>\r\n\r\n    <span></span>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

对于第二种情况，您可以看到它计算为grid

\n\n

\n