CSS將專案均勻地分布在兩行中，同時保持專案的寬度靈活-有解無憂

我正在嘗試創建以下設計： CSS 將專案均勻地分布在兩行中，同時保持專案的寬度靈活

html 看起來類似于這個

<div className='container'>
  <div className='badge'/>
  <div className='badge'/>
  <div className='badge'/>
  <div className='badge'/>
  <div className='badge'/>
  <div className='badge'/>
  <div className='badge'/>
  <div className='badge'/>
</div>

徽章應均勻分布在兩行中，因此如果像示例中一樣總共有 8 個徽章，則每行應包含四個徽章。但是，在某些情況下也可以有更少的徽章，例如，如果每行有 6 個徽章，則應包含 3 個徽章。此外，徽章的寬度需要靈活，而專案之間的邊距應始終保持不變。我嘗試使用 flexbox 和 grid 來實作這一點，但沒有成功。甚至可以僅使用 CSS 來實作這樣的功能，還是我必須使用代碼劃分專案陣列并將它們包裝在兩個 div 中？

uj5u.com熱心網友回復：

您可以使用CSS grid 來完成。

grid-template-rows: repeat(2, auto);指定您想要 2 行。隨意更換auto為您想要的任何尺寸。

grid-auto-flow: column; 告訴自動放置演算法依次填充每一列。

.container {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  margin: 20px;
}

<div class='container'>
  <div class='badge'>Here 1</div>
  <div class='badge'>Here 2</div>
  <div class='badge'>Here 3</div>
  <div class='badge'>Here 4</div>
  <div class='badge'>Here 5</div>
  <div class='badge'>Here 6</div>
  <div class='badge'>Here 7</div>
  <div class='badge'>Here 8</div>
</div>

<div class='container'>
  <div class='badge'>Here 1</div>
  <div class='badge'>Here 2</div>
  <div class='badge'>Here 3</div>
  <div class='badge'>Here 4</div>
  <div class='badge'>Here 5</div>
  <div class='badge'>Here 6</div>
</div>

<div class='container'>
  <div class='badge'>Here 1</div>
  <div class='badge'>Here 2</div>
  <div class='badge'>Here 3</div>
  <div class='badge'>Here 4</div>
  <div class='badge'>Here 5</div>
</div>

如果元素的分布方式對您來說是個問題，請查看此答案。（最多涵蓋 12 個元素）

uj5u.com熱心網友回復：

你可以改變flex-basis: 25%;你的情況

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.badge {
  padding: 5px 2.5%;
  margin-top: 10px;
  flex-basis: 25%;
  box-sizing: border-box;
}

<div class='container'>
  <div class='badge'>Here</div>
  <div class='badge'>Here</div>
  <div class='badge'>Here</div>
  <div class='badge'>Here</div>
  <div class='badge'>Here</div>
  <div class='badge'>Here</div>
  <div class='badge'>Here</div>
  <div class='badge'>Here</div>
</div>

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

標籤：css 弹性盒 css网格

上一篇：樣式后更改Python數字格式

下一篇：如果我沒有在任何地方設定<br>，為什么我的下拉按鈕圖示會出現在單詞本身下面？