在同一个容器中对齐具有不同高度的弹性项目

Question

我想知道是否可以让弹性项目水平对齐到同一容器中较大的弹性项目。使用 CSS 浮动很容易完成，但我无法使用弹性项目完成它。

View this JSFiddle for a flexbox example.

View this JSFiddle a float example

网格布局

<div class="flex-container">
 <div class="large-flex-item">
</div>
<div class="small-flex-item">
 </div>
<div class="small-flex-item">
 </div>
</div>

CSS

 .flex-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
   max-width: 500px;
   margin-right: auto;
   margin-left: auto;
 }

 .small-flex-item {
   flex-basis: 33.333%;
   background: #000;
   padding-top: 30%;
 }

 .large-flex-item {
   flex-basis: 66.667%;
   background: #333;
   padding-top: 60%;
 }

Answer 1

Flexbox 不喜欢通过多列或多行展开的 flex 项，因为实际上 flexbox 没有网格概念。

但是，使用一些技巧，您可以实现这种布局（以及more complicated ones）：

• 使用行布局

  ┌─┬─┬─┐
  │1│2│3│
  └─┴─┴─┘
  

• 允许使用flex-wrap: wrap 换行。

• 使用伪元素强制2后换行

  ┌─┬─┐
  │1│2│
  ├─┼─┘
  │3│
  └─┘
  

• 在 2 和 3 上使用 width: 33%，在 1 上使用 flex: 1。

  ┌───────────────┬─────┐
  │1              │2    │
  ├─────┬─────────┴─────┘
  │3    │
  └─────┘
  

• 将margin-left: auto 设置为 3

  ┌───────────────┬─────┐
  │1              │2    │
  └───────────────┼─────┤
                  │3    │
                  └─────┘
  

• 选择一些长度x

• 将height: x 设置为2 和3。将height: 2*x 设置为1。

  ┌───────────────┬─────┐
  │1              │2    │
  │               ├─────┘
  │               │
  └───────────────┼─────┐
                  │3    │
                  └─────┘
  

• 将margin-bottom: -x 设置为 1：

  ┌───────────────┬─────┐
  │1              │2    │
  │               ├─────┤
  │               │3    │
  └───────────────┴─────┘
  

• 注意flexbox引入auto作为min-width的新初始值。这可能会让内容迫使一些盒子增长。这会破坏布局，因此请使用min-width: 0 禁用它或将overflow 设置为除visible 之外的任何内容。

代码如下：

.flex-container {
  display: flex;
  flex-flow: row wrap;
}
.flex-item {
  overflow: hidden;
}
.flex-container::after {
  content: '';
  width: 100%; /* Force line break */
}
.large.flex-item {
  flex: 1;
  height: 200px;
  margin-bottom: -100px;
  background: red;
}
.small.flex-item {
  width: 33.333%;
  height: 100px;
  background: green;
}
.small.flex-item + .small.flex-item {
  order: 1;
  margin-left: auto;
  background: blue;
}

<div class="flex-container">
  <div class="large flex-item">1</div>
  <div class="small flex-item">2</div>
  <div class="small flex-item">3</div>
</div>

但是，修改 HTML 以便嵌套弹性框会更容易。

Answer 2

你可以通过嵌套弹性容器来实现布局。

HTML

<div class="flex-container">

  <div class="large-flex-item"></div><!-- flex item #1 -->

  <div class="flex-container-inner"><!-- flex item #2 & nested flex container -->
     <div class="small-flex-item"></div><!-- this flex item and sibling will align... -->
     <div class="small-flex-item"></div><!-- ... in column next to .large-flex-item -->
  </div>

</div>

CSS

 .flex-container {
   display: flex;
   width: 500px;
   margin-right: auto;
   margin-left: auto;
 }

 .large-flex-item {
   flex-basis: 66.667%;
   height: 200px;
   background: #333;
 }

.flex-container-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.small-flex-item {
   flex-basis: 100%;
   height: 100px;
   background: #000;
 }

DEMO