Flexbox：一旦另一個彈性專案的寬度為0，如何包裝一個彈性專案？-有解無憂

我有一個包含 2 個元素的 flex 容器。這是一個 Flexbox：一旦另一個彈性專案的寬度為0，如何包裝一個彈性專案？

這篇文章讓我相信它與flex-basis財產有關。

使用 flex-wrap 的第一個問題是 flex 專案只有在它們的總 flex-basis 大于 flex 容器的大小時才會開始包裝。

但是，無論我嘗試什么屬性，我似乎都無法讓它按照我想要的方式作業。

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  /* Only wrap once the text is fully gone and not visible anymore. */
  /* flex-wrap: wrap; */
}

.actions button:not(:last-child) {
  margin-right: 10px;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

uj5u.com熱心網友回復：

您可以通過flex-shrink在第一個容器上使用 big 來近似計算。這將更優先考慮第一個容器的收縮效果。

顯示代碼片段

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
  flex-shrink:99999;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

您還可以簡化所有代碼，如下所示：

.wrapper {
  display: flex;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  flex-basis:0;
  flex-grow:1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}


.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
      Lorem ipsum dolar sit amet constructeur
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

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

標籤：javascript html css 弹性盒 css-位置

上一篇：單擊后，ReactJS漢堡選單不起作用

下一篇：如何在JS中按鍵對值進行分組和連接