Flexbox - 第一列全高[重复]答案

【问题标题】：Flexbox - first column full height [duplicate]Flexbox - 第一列全高[重复]
【发布时间】：2019-10-03 07:15:31
【问题描述】：

我怎样才能使第一个.item（绿色框）100% 高度？

* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.item {
border: 1px solid red;
background: #8282e0;
width: 50%;
}
.item:nth-child(1) {
background: #a6f7a6;
height: 100%;
}
.item:nth-child(3) {
margin-left: 50%;
}

<div class="wrap">
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
</div>

Codepen - https://codepen.io/afelixj/pen/eavVJw

【问题讨论】：

你必须使用flexbox还是可以使用grid？
Flexbox 在不更改标记的情况下无法做到这一点。作为@JoeB。说，网格可以做到这一点。
当 flexbox wraps 时你不能这样做。 CSS 网格做得更好.. 类似的要求 here 但也需要排序
不需要所有这些 css 来获得这个结果，只需更改结构并删除所有 css，请查看下面的答案

标签： css flexbox

【解决方案1】：

我就是这样做的（如果您需要将三个标题完全放在彼此下方，我不知道如何使它工作，例如使用 for 循环渲染它们）

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 1;
}

.itemCont {
  display: flex;
  background: #8282e0;
  flex: 1;
  flex-direction: column;
}

.item {
  display: flex;
  border: 1px solid red;
  background: #5691f3;
  flex: 1;
}

<div class="wrap">
  <div class="itemCont">
    <div class="item">
      <h3>Item Title</h3>
    </div>
  </div>
  <div class="itemCont">
    <div class="item">
      <h3>Item Title</h3>
    </div>
    <div class="item">
      <h3>Item Title</h3>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

这可以通过将flex-direction 更改为column 并将固定高度应用于.wrap 来实现

* {
    box-sizing: border-box;
}
.wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 123px;
}
.item {
    border: 1px solid red;
    background: #8282e0;
    width: 50%;
}
.item:nth-child(1) {
    background: #a6f7a6;
    height: 100%;
}

<div class="wrap">
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
</div>

【讨论】：

如果您这样做，flex 的用途是什么。这可以在没有 flex 的情况下实现。试试float:left 到.item。
你给了第一个项目的静态高度你没有在描述中提到，项目2或项目3中的内容是什么增加了..它会占用高度吗？
更好地使用网格。
我同意最好使用网格，但问题是如何在 flexbox 中做到这一点，所以这就是我的答案。
你没有使用 flex 。如果你还在玩宽度。阅读此developer.mozilla.org/en/docs/Web/CSS/flex

【解决方案3】：

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

.item {
  border: 1px solid red;
  background: #8282e0;
  flex:1;
}

.item-inner {
  flex: 1;
  justify-content:center;
  height:100px;
}
.wrap-inner{
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
}
.item:nth-child(1) {
  background: #a6f7a6;
  height: 200px;
}

.item:nth-child(3) {
  margin-left: 50%;
}

<div class="wrap">
  <div class="item item-outer">
    <h3>Item Title</h3>
  </div>
  <div class="item wrap-inner">
    <div class="item-inner">
      <h3>Item Title</h3>
    </div>
    <div class="item-inner">
      <h3>Item Title</h3>
    </div>
  </div>
</div>

这将适合使用flex 属性并改变高度。

【讨论】：

你的代码有额外的 HTML 和 CSS，虽然这个结果至少不需要那么多 HTML，检查我的答案

【解决方案4】：

不需要额外的 CSS，只需根据需要更改结构并提供背景颜色即可。

* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.item {
border: 1px solid red;background: #8282e0;
}
.wrap > .item{width: 50%;}

<div class="wrap">
  <div class="item">
    <h3>Item Title</h3>
  </div>
  <div class="item">
  <div class="item">
    <h3>Item Title</h3>
  </div>
  <div class="item">
    <h3>Item Title</h3>
  </div>
  </div>
</div>

【讨论】：