我正在使用 Flexbox,但是当我尝试将父 div 的高度/宽度设置为自动时似乎出现了问题。
Flexbox指南,
.parent {
background: #000;
width:100px; /* I WANT TO SET THIS AUTO ** NOT FIX 100PX** */
height:100px; /* I WANT TO SET THIS AUTO ** NOT FIX 100PX** */
}
.child {
display: flex;
color:white;
flex-direction: column;
flex-wrap: wrap;
max-height: 50px;
list-style:none;
}
<div class="parent">
<div class="child">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</div>
</div>
我也试试这个,
.parent {
background: #000;
flex:1;
}
但它只为一排子项着色,
根据子记录宽度设置父背景颜色有问题, 如何使用 Flexbox 自动设置宽度。
是否可以使用 JavaScript 找出宽度并设置父宽度?
请您建议根据 div 的最大高度排列元素的最佳做法。
最佳答案
以下是您需要解决的几个问题。根据您的风格,“.child”是 flex 容器,<li>
元素是 flex 元素。
<li>
不能嵌套在<div>
中.它需要与<ul>
一起使用或<ol>
.我认为您的“.child”是容器 flexbox 。如果您使用的是 IE11,则可以 “display:-ms-flexbox”工作(不是 display:flex)(display:flexbox 在 IE11 中无效)
删除“最大高度:50 像素;”它限制了容器框 (.child) 的大小。你包含
<li>
.你将 flex-direction 设置为 column 所以<li>
元素将从上到下列出。然后你可以删除(.parent 宽度和高度。)现在,如果您想让 .child 的大小等于其元素的大小,那么您需要查看子元素的更多 margin:0px 和 display:inline-block 属性。
关于javascript - 根据显示 flexbox 中的子项设置父项高度/宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30622938/