首页  >  文章  >  web前端  >  如何将 Flex 项目置于周围元素不均匀的容器中?

如何将 Flex 项目置于周围元素不均匀的容器中?

Barbara Streisand
Barbara Streisand原创
2024-11-01 02:45:28217浏览

How to Center a Flex Item in a Container with Uneven Surrounding Elements?

将容器中的 Flex 项目与其他 Flex 项目居中

挑战:

居中在弹性容器内,同时被不同数量的 包围。

方法:

由于弹性对齐属性会分配容器内的可用空间,因此在不采取额外措施的情况下,将单个项目置于不均匀的同级元素中居中是一项挑战。

考虑:

当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属性将容器设置为“1 1 auto”,它们在弹性容器内占据相同的空间。

的 Flex 属性设置为“0 0 auto”,将其从 Flex 空间分布中排除。边距自动确保

位于其
的中心

其他见解:

  • 元素在其各自的
    内居中。由于文本对齐属性,容器。
  • 虽然这种方法将

    居中,但完美,如果周围内容的长度是动态的,它可能不适合。

以上是如何将 Flex 项目置于周围元素不均匀的容器中?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:How to Get the Height of a Div Without a Defined CSS Height Rule?下一篇:How do you vertically align `` elements within a ``?

相关文章

查看更多