javascript - 使用负边距来控制 flex-box 中的空间

Question

为了解决我一直遇到的问题，我一直在阅读关于 flex-boxes 的资料。我阅读/用作问题研究的主要文章是 this .

我最近在 this 中提出了这个话题和 this问题并感谢 @ Michael_B 的帮助, 已经制定了如何将一个元素(在本例中为 <h2> )置于 flex 盒子的中心，只要 flex 盒子中始终只有三个 flex 元素(在这种布局中: <div><h2><div> ) .

我想扩展这些要点，因为我意识到可能有一个解决方案可以解决总 flex 元素多于或(更现实地)少于 3 个的情况。

它涉及使用边距。如果你使用 margin: auto;在 flex 元素上，它使元素在主轴上居中(有关 flex 盒的工作原理，请参见下图)。

img {
 width: 100%;
 height: 100%;
}

<img src="http://i.stack.imgur.com/9Oxw7.png" alt="flex-box demo" />

(这是我弄清楚如何获取下拉照片的最佳方式...)

据我了解，使用 margin: auto是当前对应于 align-self横轴属性。

因此，可以通过以下方式将 flex 元素居中放置在 flex 盒中:

$(document).on('click', 'button', function(e) {
  $this = $(this);
  if ($this.attr('id') === 'button1') {
    $('h2').parent().attr("class", "");
    $('h2').attr("class", "toggle1");
  }
  if ($this.attr('id') === 'button2') {
    $('h2').parent().attr("class", "");
    $('h2').attr("class", "toggle1");
  }
  if ($this.attr('id') === 'button3') {
    $('h2').parent().attr("class", "toggle3");
    $('h2').attr("class", "");
  }
  if ($this.attr('id') === 'button4') {
    $('h2').parent().attr("class", "toggle4");
    $('h2').attr("class", "");
  }
  if ($this.attr('id') === 'button0') {
    $('h2').parent().attr("class", "");
    $('h2').attr("class", "");
  }
});

div:not(.cont),
div:not(.cont) * {
  border: 1px dotted red;
}
div {
  align-items: center;
  display: flex;
}
button {
  margin: 16px;
}
.toggle1 {
  margin: auto;
}
.toggle2 {
  flex: 1;
}
.toggle3 {
  justify-content: center;
}
.toggle4 {
  justify-content: space-between;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div>
  <h2>I'm an h2</h2>
</div>
<div>
  <span>I'm a span!</span>
  <h2>I'm an h2</h2>
  <span>I'm a span!</span>
</div>
<div>
  <span>I'm a span!</span>
  <span>I'm a span!</span>
  <h2>I'm an h2</h2>
  <span>I'm a span!</span>
  <span>I'm a span!</span>
</div>
<div class="cont">
  <button id="button0">clear</button>
  <button id="button1">margins</button>
  <button id="button2">flex-grow</button>
</div>
<div class="cont">
  <button id="button3">justify-content: center
    <br />(on parent)</button>
  <button id="button4">justify-content: space-around
    <br />(on parent)</button>
</div>

正如您从上面的代码片段中看到的，它仅在 <h2> 的每一侧都有相同数量的 flex 元素时才有效。 (您还可以看到 justify-content: space-around 不适用于一个对象)。

But what if there are an unbalanced amount of flex items on each side of the object you are trying to center? - Sure, you could put blank elements there and use flex: 1;, but that seems a bit hacky.

我的想法是利用负边距。我读了一篇很棒的文章 ( here )，内容涉及使用负边距以及它们如何将对象拉向负边距等等(另外，甚至 w3 说它们是合法代码 - 不是 hacky)。

思路是设置<h2>至 margin: auto;然后不知何故(我强调不知何故，因为我一直在做的所有研究我开始失去希望......)取任何兄弟 flex 元素的宽度并从<h2> margin: auto;中取反...听起来很老套，希望有一种方法可以在没有 JS/jQuery 或 CSS 编译器的情况下做到这一点。

Does anyone know of a way to negate from the margin of a flex item the width of a sibling flex item in the same flex-box?

谢谢。

附注/更新

可能有一种方法可以使用 position 来完成此操作属性(property);然而，我所做的所有测试都没有产生任何结果......也许其他人已经用这种方法成功了？

Answer 1

一种方法是将中心元素从正常的 flex 流程中移除。 通过将其绝对定位在容器内是可能的。 这样做的缺点是 flex 容器不再考虑绝对定位元素的高度。

codepen

.container {
  position: relative;
  display: flex;
  width: 500px;
  justify-content: flex-start;
  align-items: center;
  outline: 1px solid blue;
}

.item {
  flex: 0 0 auto;
  outline: 1px solid red;
  margin: 0;
}

.item--center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.item--right {
  margin-left: auto;
}

<div class="container">
  <span class="item">I'm a span!</span>
  <span class="item">I'm a span!</span>
  <h2 class="item item--center">I'm an h2</h2>
  <span class="item item--right">I'm a span!</span>
</div>