Question

是否可以在一行上创建多个flexbox，每个flexbox都有自己的子flex元素？

为了更加精确地了解我的要求，假设它们是一个具有2个flex元素的flexbox，每个元素的最大宽度为50％，高度为100％，现在可以选择在这个已存在的元素旁边添加其他元素，因此，在添加新的flex元素时，元素的总数将为3，宽度为25％，25％和50％，所有元素的高度均为100％，这是可能的，但如果我们想要以这样的方式添加元素，使元素的宽度保持不变，但高度减少一半，即元素的高度将是50％，50％和100％，所有元素的宽度将是50％是它可能的？

Answer 1

您只需要在左右容器元素上使用flex-direction: column，如果在子元素上设置flex: 1，则每个元素的高度都相同。

$('.parent').on('click', '.left > div, .right > div', function() {
  $(this).parent().append('<div />')
})

.parent {
  display: flex;
}
.left,
.right {
  height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid black;
}
.left > div,
.right > div {
  flex: 1;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="left">
    <div></div>
    <div></div>
  </div>

  <div class="right">
    <div></div>
  </div>
</div>

多个flexbox单行

1 个答案: