首页display: inline-flex; 导致 align-content: center 失效

display: inline-flex; 导致 align-content: center 失效

时间: 2023-05-23 20:05:41 浏览: 288

display:inline的用法

<div> DIV1 </div> <div> DIV2 </div> 这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了 <div xss=removed> DIV1 </div> <div xss=removed> DIV2 </div> DIV1和DIV2这时候显示在同一行了，试试看吧和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了 <span

A：当使用display: inline-flex;作为容器的属性时，align-content属性将失效。这是因为align-content属性仅适用于flex容器，而不适用于inline-flex容器。此时，我们可以考虑使用align-items属性来对齐flex项目。如果需要在inline-flex容器中使用align-content属性，请将容器的display属性更改为flex，这样align-content属性才会生效。

阅读全文