当被其他弹性项目包围时，在容器中居中弹性项目

IT技术 javascript jquery html css flexbox
2021-03-07 13:42:15

我有一个 flex-box（有关示例，请参见下面的代码段）。

我想设置它，以便在所有情况下，<h2>is 位于flex-box的中心，其他 span 将根据它们的标记围绕它流动。

我基本上是在寻找一个align-selfCSS 代码，但是对于主轴，而不是横轴（这可能有助于解释我的要求）。

我也在申请margin: auto;我的<h2>，这是我在阅读本文后了解到的（很棒的页面，但仍然给我留下了以下问题 - 除非我没有完全理解所有内容）。

这是我得到的代码：

显示代码片段

完全重申我的问题：我想知道如何将 the<h2>放在我的页面上，以便其他<span>s所在的位置<h2>始终位于flex-box的死点。

谢谢你。

PS 我愿意使用 JS 和 jQuery，但更喜欢纯 CSS 方式来实现这一点。

更新

这是并在@ Michael_B回答后更新

他的回答让我思考。虽然我还没有找到一种方法来做到这一点，但我相信以下是朝着正确方向迈出的一步：

HTML

<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>

CSS

.container div {
  flex: 1 1 auto;
  text-align: center;
}
h2 {
  flex: 0 0 auto;
  margin: auto;
}

显示代码片段

基本上，理论是虽然总<span>s 的数量未知，但已知的是总共会有三个元素：<div><h2><div>

正如您在上面的代码段中看到的那样，我尝试过（flex: 0 0 auto和flex: 1 1 auto等）让它工作，但没有成功。谁能告诉我这是否是朝着正确方向迈出的一步，以及如何将其推向实际产品？

再次感谢你。

2个回答

Flex 对齐属性通过在容器中分配可用空间来工作。

因此，当一个 flex item 与其他 item 共享空间时，没有单步方法将其居中，除非两侧的兄弟元素的总长度相等。

在您的第二个示例中，跨度的总长度在h2. 结果，h2完美地在容器中居中。

显示代码片段

请记住，将h2with justify-content: center(or space-aroundor space-between)居中，仅在双方平衡时才有效。每一个像素的边差都会甩掉h2一个相当的量。

在您的第一个和最后一个示例中，双方之间存在明显的不平衡。标准对齐属性，例如justify-content和margin将不起作用，因为它们在可用空间内居中，而不是在总空间内。

您可以在相对的两侧插入重复的跨度visibility: hidden以实现相等的平衡。但这会使用语义上毫无value的元素使您的标记膨胀。

相反，如果您有能力计算每个跨度的宽度，则可以插入伪元素以实现相等的平衡。

显示代码片段

最终，作为使用 CSS 的最后手段，您可以h2使用绝对定位居中。这将从文档流中删除元素，但始终保持它在容器中完美居中。

显示代码片段

更新（基于修改后的问题）

基本上，该理论是，虽然总<span>s 的数量未知，但已知的是总共会有三个元素：<div><h2><div>。

所以，如果我们知道总会有三个元素，那么就有一个使用 flex 属性的潜在解决方案。

显示代码片段

这是发生了什么：

  • 这三个元素是弹性项目，因为它们的父元素是弹性容器
  • 每个项目都有一个flex: 1，这使它们在它们之间平均分配容器空间。最终结果是三个等宽的项目。
  • 现在，h2将h2元素中的文本居中也将使容器中的文本居中。
  • 每个 div 都可以成为一个嵌套的 flex 容器，并且跨度可以与 flex 属性对齐。

更多信息和解决方案：

是的，你是对的。谢谢你。我已经提出了一个新问题（stackoverflow.com/questions/39043729/...）并将其从这个问题中删除
2021-04-20 13:42:15
我的朋友，你是 flex-boxes 之神。这真的很有帮助。我还有最后一个问题，当然，如果您愿意的话（我只是在测试您上次更新时才想到的）。也许太多了，但也许你能帮上忙。你已经超出了慷慨。
2021-05-04 13:42:15
哇！确实是精明的回答。在此之后我更新了我的答案，也许您对此有进一步的了解？谢谢你。
2021-05-13 13:42:15
由于 Stack Overflow Q & A 旨在为更广泛的开发人员社区提供高质量的参考，添加过多的更新和与原始问题的偏差会使这篇文章变得不那么有用并且有些令人费解。我建议你把这个问题集中在一个特定的问题上。对于关于以order房产为中心的问题，请考虑发布一个新问题。
2021-05-16 13:42:15

一种方法是在两侧添加空跨度，然后将跨度和 h2 设置为某个 flex 值，如下所示：

.container {
  align-items: center;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  width: 100%;
}
h2 {
  margin: auto;
  text-align: center;
  flex: 3 0;
}
span{
  flex: 1 0;
}
<div class="container">
<span></span>
<span></span>
<span></span>
  <h2>I'm an h2</h2>
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
</div>
<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span></span>
  <h2>I'm an h2</h2>
  <span>I'm span 3</span>
  <span></span>
  <span></span>
</div>

所以你保证两边的空间是相等的。唯一的问题是您必须确定您希望 h2 占用多少宽度。

哇！好点子。这很好，但需要始终有六个跨度（每边三个），如果我将此 html 分发给我的一位同事而他忘记放置额外的跨度，则会出错。你知道吗？这是否可能需要使用 JS 代码来验证是否有六个/偶数（比如每边放置超过 6 个跨度）？再次感谢您的回答
2021-04-22 13:42:15
其它你可能感兴趣的问题
上一篇eval 有什么作用，为什么它是邪恶的？ 下一篇如何获取从 fetch() Promise返回的数据？