Flex容器：有没有办法在容器包装时拉伸第一个项目的高度答案

【问题标题】：Flex container: Is there a way stretch the first item's height when container wrapsFlex容器：有没有办法在容器包装时拉伸第一个项目的高度
【发布时间】：2021-11-04 03:55:22
【问题描述】：

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.item {
  height: 100px;
  width: 100px;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
  </div>

  <div class="item">
    item 3
  </div>
</div>

有没有办法在物品包装时使这样的事情起作用？现在 item-3 正好包裹在 item-1 的下方。我希望它包裹在 item-2 下方

小提琴链接：https://jsfiddle.net/kmajqrsx/

【问题讨论】：

你是想把第三个项目推到底部而不是保持在一行吗？
只有在包装时才可以。就像你调整屏幕大小时一样

标签： javascript html css flexbox

【解决方案1】：

您可以尝试使用margin-left: 100px 实现此目的，其中100px 是.item 的宽度并将其添加到item 3。

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

:root {
  --val: 100px;
}

.item {
  height: var(--val);
  width: var(--val);
}

.flex-container ~ .item {
  margin-left: calc(var(--val) + 2px);
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>

  <div class="item">item 3</div>
</div>

第二种解决方案看起来与 MaxiGui 几乎相同，但我们使用媒体查询创建断点并将 min-content 设置为宽度。

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

:root {
  --val: 100px;
}

.item {
  height: var(--val);
  width: var(--val);
}

/* 404px is 100px * 2 + 2px lefr-border + 2px right-border */
@media screen and (max-width: 404px) {
  .flex-container {
    width: min-content;
    background-color: aquamarine;
  }
}
.flex-container ~ .item {
  margin-left: auto;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>

  <div class="item">item 3</div>
</div>

【讨论】：

【解决方案2】：

将margin-left: auto; 添加到最后一项：

演示

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.item {
  height: 100px;
  width: 100px;
}

.flex-container > .item{
  margin-left:auto;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
  </div>

  <div class="item">
    item 3
  </div>
</div>

【讨论】：