我有一个包含包装内容的 flexbox。我怎样才能将 flexbox 收缩包装到它的内容中?我试图解决的根本问题是使 flexbox 居中。这张图片描述了我的问题:
我怎样才能做到这一点?纯 CSS 有可能吗?我事先不知道 flexbox 是否会换行到 1、2 或 3 列。元素的宽度是已知的。高度最好是未知的,但如果这样更容易,我可以决定一个恒定的高度。
width:min-content
、width:max-content
、width:fit-content
和inline-flex
似乎都无法解决问题。
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;
。第二种选择可能更适合你:
* {
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>