排列 flexbox 元素，第一个孩子占据整个两行高度

2024-05-21 • 问答

如何在 flexbox 中这样排列元素：
在浏览器中：。

在移动中：

如果你需要同时控制高度和宽度，那么你应该使用CSS-Grid。 Flexbox 只擅长控制高度或宽度。

CSS-Grid 通过在列和行线上放置元素来创建类似表格的布局。

要使用网格，请在容器上应用 display: grid;。要使元素跨越 2 行，请将 grid-row: span 2; 应用于元素本身。

.container {
  display: grid;
  grid-gap: 10px;
}

@media only screen
  and (min-width: 500px) {
    .container {
      grid-template-columns: repeat(2,1fr);
    }
    
    .container div:first-of-type {
      grid-row: span 2;
    }
}

/* for styling purpose only */
.container div {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid black;
  min-height: 20vh;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

这是 Flexbox 的工作示例，您只需要为第 2 项和第 3 项添加额外的包装器

html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
  
@media (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
}

.one {
  height: 50%;
  width: 100%;
  background-color: red;
}
  
@media (min-width: 768px) {
  .one {
    height: 100%;
    width: 50%;
  }
}

.two-three {
  flex-direction: column;
  width: 100%;
  height: 100%;
}
  
@media (min-width: 768px) {
  .two-three {
    height: 100%;
    width: 50%;
  }
}

.two {
  height: 50%;
  background-color: green;
}

.three {
  height: 50%;
  background-color: blue;
}

<div class="wrapper">
  <div class="one">
  </div>
  <div class="two-three">
    <div class="two">
    </div>
    <div class="three">
    </div>
  </div>
</div>

排列 flexbox 元素，第一个孩子占据整个两行高度

zhangyaoning 回答：排列 flexbox 元素，第一个孩子占据整个两行高度

大家都在问