Question

我使用的是Flexbox，但是当我尝试将父div的高度/宽度设置为自动时似乎有问题。

＆＃13;

.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;
}

＆＃13;

<div class="parent">
    <div class="child">
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </div>
</div>

＆＃13;

我也试试这个，

.parent {
    background: #000;
    flex:1;
}

但它只为一行子项着色，

根据子记录宽度设置父背景颜色有问题，如何使用Flexbox设置宽度自动。

是否可以使用JavaScript找出宽度并设置父宽度？

请您建议最佳做法按照div的最大高度排列项目。

Answer 1

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

<li>无法嵌套在<div>中。它需要与<ul>或<ol>一起使用。
我认为你“.child”是容器弹性盒子。如果你使用的是IE11，你可以 “display：-ms-flexbox”工作（不显示：flex）（显示：flexbox在IE11中无效）
删除“max-height：50px;”它限制了容器盒（.child）的大小。你包含<li>。您将flex-direction设置为column，以便从上到下列出<li>个元素。然后你可以删除（.parent宽度和高度。）
现在，如果您尝试使.child的大小等于其元素的大小，那么您需要查看更多的边距：0px并显示：子元素的内联块属性。

根据显示弹性框中的子项设置父高度/宽度

1 个答案: