搜尋

首頁  >  問答  >  主體

使用收縮包裝彈性盒包裝彈性項目,使其可以居中

我有一個包裝內容的彈性盒。如何將彈性盒收縮到其內容上?我試圖解決的根本問題是將彈性盒居中。這張圖片描述了我的問題:

我要怎麼達成這個目標?純CSS可以實現嗎?我事先不知道 Flexbox 是否會換行為 1、2 或 3 列。元素的寬度是已知的。高度最好是未知的,但如果這樣比較容易,我可以決定一個恆定的高度。

既不是width:min-contentwidth:max-contentwidth:fit-content也不是inline-flex< /code> 似乎可以解決問題。

JS 小提琴:https://jsfiddle.net/oznts5bv/

.container {
  display:flex;
  flex-wrap:wrap;
  border:1px dashed magenta;
}

.container div {
  width:100px;
  height:60px;
  border:1px solid black;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

P粉807239416P粉807239416467 天前583

全部回覆(1)我來回復

  • P粉070918777

    P粉0709187772023-09-14 14:26:32

    創建了兩個範例:使用 display: flex;display: grid;。第二個選項可能更適合您:

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-y: scroll;
    }
    
    .container {
      display: flex;
      flex-wrap: wrap;
      border: 1px dashed magenta;
      max-width: min(100%, 302px);
    }
    
    .container div {
      width: 100px;
      height: 60px;
      border: 1px solid black;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    <input type="range" min="100" max="600" value="302" oninput="document.querySelectorAll('.container').forEach(el => el.style.maxWidth = 'min(100%, ' + this.value + 'px)')">
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
    <br>
    <div class="container grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>

    回覆
    0
  • 取消回覆