如何讓彈性專案跳到下一行？-有解無憂

我有一個基本的 html 標記，我正在嘗試使用最小的 html 包裝器來實作設計。
底部的button不應該對齊，它應該始終留在底部。
所以我的目標是不添加更多的 html 包裝器，使用 flex，強制 flex item( button) 放到下一行。并block title留在影像旁邊。
你可以明白我的意思是在移動斷點上檢查它。這是螢屏截圖flex-wrap: wrap 如何讓彈性專案跳到下一行？

這是與flex-wrap: nowrap 如何讓彈性專案跳到下一行？

如您所見，在第一個示例中，按鈕本應位于底部，但block title被放到了下一行，而在第二個示例中，( flex-wrap: wrap)block title的位置正確，但按鈕不在底部。

這是沙箱鏈接和代碼示例

body {
  margin: 0;
  padding: 0;
}

.container {
  background-color: grey;
  overflow: auto;
  padding: 20px;
  align-items: center;
  display: flex;
  position: relative;
  column-gap: 15px;
  flex-wrap: wrap;
  /* //try nowrap */
  width: 100%;
}

.logo-image {
  align-self: flex-start;
}

.headline {
  color: white;
}

.text {
  color: white;
  font-size: 16px;
  margin-bottom: 20px;
}

.btn {
  display: flex;
  width: 100%;
}

button {
  align-items: center;
  background-color: black;
  color: white;
  flex: 0 0 100%;
  justify-content: center;
  margin: 0;
}

<div class="container">
  <img src="download.png" width="50px" class="logo-image" alt="img" />
  <span class="content">
        <h4 class="headline">
          Block Title
        </h4>
        <p class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
          aliquid sit, cupiditate
        </p>
      </span>
  <div class="btn">
    <button>link</button>
  </div>
</div>

任何幫助將不勝感激

uj5u.com熱心網友回復：

您可以將 span 設定為塊級元素并將 flex-grow 設定為 1，但將 flex-basis 設定為較小的值，例如 50%，這樣它會嘗試成為寬度的 50%，但會增長以適應寬度。這意味著當收縮時它會盡量保持在同一條線上。

body {
  margin: 0;
  padding: 0;
}

.container {
  background-color: grey;
  overflow: auto;
  padding: 20px;
  align-items: center;
  display: flex;
  position: relative;
  column-gap: 15px;
  flex-wrap: wrap;
  width: 100%;
}
/* added this --v */
.content {
  display: block;
  flex: 1 0 50%;
}

.logo-image {
  align-self: flex-start;
}

.headline {
  color: white;
}

.text {
  color: white;
  font-size: 16px;
  margin-bottom: 20px;
}

.btn {
  display: flex;
  width: 100%;
}

button {
  align-items: center;
  background-color: black;
  color: white;
  flex: 0 0 90%;
  justify-content: center;
  margin: 0;
}

<div class="container">
  <img src="https://www.fillmurray.com/200/200" width="50px" class="logo-image" alt="img" />
  <span class="content">
        <h4 class="headline">
          Block Title
        </h4>
        <p class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
          aliquid sit, cupiditate
        </p>
      </span>
  <div class="btn">
    <button>link</button>
  </div>
</div>

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

標籤：网页格式CSS

上一篇：無法使用帶有硒Python的xpath訪問特定元素

下一篇：使用實時匯率的GUIJAVA貨幣轉換器應用程式