我有一個包裝內容的彈性盒。如何將彈性盒收縮到其內容上?我試圖解決的根本問題是將彈性盒居中。這張圖片描述了我的問題:
我要怎麼達成這個目標?純CSS可以實現嗎?我事先不知道 Flexbox 是否會換行為 1、2 或 3 列。元素的寬度是已知的。高度最好是未知的,但如果這樣比較容易,我可以決定一個恆定的高度。
既不是width:min-content
、width:max-content
、width: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>
創建了兩個範例:使用
display: flex;
和display: grid;
。第二個選項可能更適合您: