这可能与 Flexbox 相关吗？

Question

我在 flexbox 中有三个 div，我想让它们以某种方式对齐。这是 HTML 的设置方式。

 <div class="holder">
    <div class="section-one"></div>
    <div class="section-two"></div>
    <div class="section-three"></div>
 </div>

我需要像这样布置物品：

first column	second column
section one	section two
section one	section three

我实际上并不想要它们 table。我需要两列，其中每个项目的宽度为 50%，但第二部分和第三部分堆叠在一起。我知道一种解决方案是有两列，但出于某些原因我不能说我不能这样做。我需要三个项目都在同一行中。

Answer 1

最简单的标记解决方案是使用 CSS-Grid。只需创建一个 2 列网格并让第一个元素跨越 2 行 grid-row: span 2

.holder {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.section-one {
  grid-row: span 2;
}


/* For demo purpose only */
div > div {
  min-height: 50px;
  box-shadow: 0 0 0 2px red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.holder {
  gap: 2px;
}

<div class="holder">
  <div class="section-one">1</div>
  <div class="section-two">2</div>
  <div class="section-three">3</div>
</div>

Answer 2

尽管我同意 CSS-grid 是一个不错的选择 - 使用 flexbox 并不难。

只需创建两个水平对齐的 div（flex 默认为 flex-direction:row - 因此您无需指定）以创建左右列并将第一部分 div 在左列 - 然后在右列中的其他两个部分 divs 并使用 flex-direction:column 获得垂直对齐。

.holder {
   display: flex;
   width: 400px
}

.column {
 flex-grow: 1;
 flex-basis: 50%;
 border: solid 1px #a9a9a9;
 display: flex;
 flex-direction: column
}

 .column-header {
background: #d4d4d4;
border-bottom: solid 1px #a9a9a9;
 padding: 8px 16px;

}

.column div:not(.column-header) {
 padding: 8px 16px;
 height: 100%
}

.section-one {
  background: lime
}

.section-two {
  background: aqua;
}

.section-three {
  background: yellow;
}

<div class="holder">
  <div class="column left-column">
    <div class="column-header">First Column</div>
    <div class="section-one">section 1</div>
  </div>
  <div class="column right-column">
    <div class="column-header">Second Column</div>
    <div class="section-two">Section 2</div>
    <div class="section-three">section 3</div>
  </div>
 </div>

这可能与 Flexbox 相关吗？

Is this possible to do with a Flexbox?

html

css

flexbox