挑战:
将
方法:
由于弹性对齐属性会分配容器内的可用空间,因此在不采取额外措施的情况下,将单个项目置于不均匀的同级元素中居中是一项挑战。
考虑:
当item两侧周围元素的总长度相等时,居中就成为可能。
解决方案:
将
<code class="html"><div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> </div> <div> <h2>I'm an h2</h2> </div> <div> <span>I'm span 3</span> </div> </div></p> <pre class="brush:php;toolbar:false"><code class="css">.container { display: flex; justify-content: center; align-items: center; } .container div { flex: 1 1 auto; // Equalize flex sizing text-align: center; } h2 { flex: 0 0 auto; // Prevent h2 from affecting flex sizing margin: auto; // Center within its container }</code>
说明:
通过设置内部
其他见解:
以上是如何将 Flex 项目置于周围元素不均匀的容器中?的详细内容。更多信息请关注PHP中文网其他相关文章!