javascript - 根据显示 flexbox 中的子项设置父项高度/宽度

Question

我正在使用 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 的最大高度排列元素的最佳做法。

Answer 1

以下是您需要解决的几个问题。根据您的风格，“.child”是 flex 容器，<li>元素是 flex 元素。

1. <li>不能嵌套在 <div> 中.它需要与<ul>一起使用或 <ol> .

2. 我认为您的“.child”是容器 flexbox 。如果您使用的是 IE11，则可以“display:-ms-flexbox”工作(不是 display:flex)(display:flexbox 在 IE11 中无效)

3. 删除“最大高度:50 像素；”它限制了容器框 (.child) 的大小。你包含 <li> .你将 flex-direction 设置为 column 所以 <li>元素将从上到下列出。然后你可以删除(.parent 宽度和高度。)

4. 现在，如果您想让 .child 的大小等于其元素的大小，那么您需要查看子元素的更多 margin:0px 和 display:inline-block 属性。