首页 > web前端 > css教程 > 正文

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

Barbara Streisand
发布: 2024-11-01 02:45:28
原创
291 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板