各位开发人员大家好，
我想创建一个允许内容从上到下、从左到右排列的容器。父容器需要拉伸以适应但在最大定义值之内。
我为此目的使用了 flexbox，但是我没有让父容器拉伸以适应。有没有人有任何建议，而不必用 javascript 来计算宽度？
.flex-container {
display: inline-flex;
background-color: #ccc;
}
.flex-container-content{
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 300px;
max-width: 1000px;
background-color: #333;
}
.flex-container-content > div {
background-color: #EB213C;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div class="flex-container-content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
您真的需要外部内联容器吗？我建议采用这种方法：
.flex-container {
display: flex;
background-color: #ccc;
}
.flex-container-content{
display: flex;
flex-flow: column wrap;
max-height: 300px;
max-width: 1000px;
background-color: #333;
}
.flex-container-content > div {
background-color: #EB213C;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<!-- <div class="flex-container"> -->
<div class="flex-container-content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<!-- </div> -->
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
