使用负边距来控制弹性框中的空间

Question

我一直在阅读灵活盒子,以解决我一直遇到的问题.我读过/用作问题研究的主要文章就是这个.

我最近在这个和这个问题中提出了这个问题,并且感谢@ Michael_B的帮助,<h2>只要总是只有三个flex ,就会解决如何将一个元素(在本例中为一个)置于一个flex-box 中心的问题.弹性框中的-items(在此布局中:) <div><h2><div>.

我想扩展这些要点,因为我意识到可能有一个解决方案可以解决,如果有更多或(更实际)少于3个灵活项目.

它涉及使用边距.如果您margin: auto;在弹性项目上使用它,它会将一个项目居中放在主轴上(有关弹性框的工作原理,请参见下图).

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>

正如您从上面的代码片段中看到的那样,它只有在每一侧都有相同数量的flex-items时才有效<h2>(并且您还可以看到justify-content: space-around只对一个对象不起作用).

但是,如果您试图居中的物体的每一侧都有不平衡的弹性物品,该怎么办？- 当然,你可以把空白元素放在那里使用flex: 1;,但这看起来有点黑客.

我的想法是利用负边际.我读了一篇很好的文章(这里)关于使用负边距以及它们如何将对象拉向它们等等(另外,甚至w3说它们是合法的代码 - 而不是hacky).

我们的想法是要设置<h2>到margin: auto;(我重点然后以某种方式以某种方式与所有的研究,我一直在做我开始失去希望......)采取任何同级柔性项的宽度和否定从<h2> margin: auto;...的声音hacky并希望有一种方法可以在没有JS/jQuery或CSS编译器的情况下完成它.

有没有人知道一种方法来消除flex项目边缘的同一个flex-box中兄弟flex项目的宽度？

谢谢.

PS/UPDATE

可能有一种方法可以实现这个position属性; 但是,我所做的所有测试都没有产生任何结果......也许其他人已成功使用这种方法？

Answer 1

所以，偶然发现了这个问题。我有点不清楚你到底想做什么，但我会尽我最大的能力来构建它。

给定容器内任意数量的元素

1. 指定一个元素始终位于数组的中心
2. 保留flex布局的使用
3. 不使用 JavaScript

这是我在 JSFiddle 的解决方案

这是如何运作的

1. 我们h2通过给元素一个位置来将其从容器流中分离出来absolute。
2. 我们将容器元素设置为一个relative位置，以确保其子元素相对于其自身定位。
3. 我们通过将和属性设置为 来告诉h2元素我们希望它位于容器元素的中心。topleft50%
4. 我们通过transform: translate(-50%, -50%)在h2. 这些translate值与受影响元素的大小相关，告诉它50%向左滑动宽度，50%向顶部滑动高度。
5. 我们添加一个“虚拟”元素来模仿h2流中的绝对定位顺序。我们为虚拟元素提供了一个尺寸来保留空间，但您也可以轻松添加一些文本或其他值以确保其获得布局。
6. 我们将虚拟元素的可见性设置为hidden。visibility: hidden在元素上使用可隐藏其显示，但仍保留其在文档流中的空间。

在创建此布局的过程中，我破坏了示例中的按钮，但是我确实清理了您的 JS 一点以使其更具可读性。如果这些按钮对您的理解很重要，我很乐意修复它们。

相关CSS如下：

div {
  position: relative;
}

h2 {
  position:absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 40px;
}
h3.filler {
  height: 40px;
  visibility: hidden;
}