Question

我需要容器。一个包含5个（或任何其他数量的元素）并且具有flex-between，另一个只包含一个元素。

是否可以使用flexbox css将元素放在第一个容器的第三个元素下的第二个容器中？在这种情况下，我们不知道第一个容器中元素之间的距离。 jsfiddle

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 800px; //this amount here for example, in real project it is 100% or auto
}
.element {
  width: 100px;
  height: 50px;
  background-color: yellow;
  margin: 10px;
}
.element--green {
  background-color: green;
}
.element--red {
  background-color: red;
}

＆＃13;

<p>
first container
</p>
<div class="container">
  <div class="element">
  
  </div>
  <div class="element">
  
  </div>
  <div class="element element--green">
  
  </div>
  <div class="element">
  
  </div>
  <div class="element">
  
  </div>
</div>
<p>
second container
</p>
<div class="container container--small ">
  <div class="element element--green">
  
  </div>
</div>

＆＃13;

Answer 1

对于此示例，您可以使用justify-content：center，但我认为您的一般情况可能是您尝试与上述容器中的任何元素对齐。就纯css而言，我不相信Flexbox可以做到这一点。我现在唯一能想到的就是你在每一排都有相同数量的容器并隐藏你不想看到的容器，但这看起来有点难看。

另一种想法似乎更适合css网格。现在在大多数浏览器的最新版本上都得到了相当好的支持，但是如果你需要支持Internet Explorer，那么你可能运气不好。

如果你能够支持网格，那么这样的东西就可以了。

HTML

<div class="container">
  <div class="element">
  </div>

  <div class="element">
  </div>

  <div class="element element--green">
  </div>

  <div class="element">
  </div>

  <div class="element">
  </div>

  <div class="element element--green col3">
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 800px; 
}
.element {
  width: 100px;
  height: 50px;
  background-color: yellow;
  margin: 10px;
}
.element--green {
  background-color: green;
}
.element--red {
  background-color: red;
}
.col3 {
  grid-column: 3;
}

Answer 2

添加

.container--small{
  justify-content:center;
}

https://jsfiddle.net/crs4kmht/11/

如何在flex-between容器中将一个元素与其他元素进行比较

2 个答案: