Question

是否可以在Flex容器中包含3个项目，但显示如下：

1 3 2 3

基本上，项目1＆amp; 2位于左侧，并且大约是它们各自需要的高度，那么第3项是右对齐但伸展了柔性容器的整个高度？

这是一个用于说明的代码：http://codepen.io/anon/pen/RrORbj

Answer 1

这是使用flexbox的jsFiddle。

<div class="container">
  <div class="col">
    <div class="box one">
      one
    </div>
    <div class="box two">
      two
    </div>
  </div>
  <div class="col">
    <div class="box three">
      three
    </div>
  </div>
</div>

首先，将容器设置为flexbox。请注意，flex-direction的默认值为row（水平）。使用col设置子元素（flex: 1）会使列在父项flex direction的方向上变得灵活。

另请注意，容器上的默认值align-items为stretch。这样做是将所有子元素（col）的高度设置为最高col的高度。

.container {
    display: flex;             //make container a flexbox
}
.col {
    flex: 1;                   //make columns flexible (horizontally)
}

接下来，我们将使用与以前相同的方法在列中垂直展开框three。

.container {
    display: flex;
}
.col {
    flex: 1;         
    display: flex;             //make col a flexbox
    flex-direction: column;    //make the children of col flex vertically
}

我们已添加display: flex和flex-direction: column以将列转换为verticale flexbox。最后要做的是让你想要的盒子在垂直方向上保持全高度灵活。

.three {
    flex: 1;                   //make it flexible
}

由于在其父级上设置了弯曲方向，

.three可以垂直灵活（不是默认的水平）。

编辑：

就个人而言，我会将课程box设置为flex: 1，如此更新jsFiddle所示。这允许任意数量的列垂直弯曲（同时仍然允许“更高”列的框根据需要增长。

Flexbox，左边有2个项目，右边是第3个，可以拉伸容器的整个高度

1 个答案: