Flex容器：有沒有辦法在容器包裝時拉伸第一個專案的高度-有解無憂

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 下方 Flex 容器：有沒有辦法在容器包裝時拉伸第一個專案的高度

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

uj5u.com熱心網友回復：

您可以嘗試使用來實作這一點margin-left: 100px，其中100px是的寬度.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>

uj5u.com熱心網友回復：

添加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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/347317.html

標籤：javascript html css 弹性盒

上一篇：Javascript將不同的功能合二為一

下一篇：我如何在html中制作一個表格，第一行只有1列，其他行超過1