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

标签 javascript html css flexbox

我正在使用 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 元素。

  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 属性。

关于javascript - 根据显示 flexbox 中的子项设置父项高度/宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30622938/

相关文章:

javascript - 如何从 html 表单执行 php 查询?

html - 特定设备的媒体查询是什么?

html - 如何制作悬停命令 = 悬停时的形状?

html - 导航栏图标在某些浏览器中不显示

html - 我必须在没有 javascript 或 div 的情况下过滤图像 :/

javascript - 使用 javascript/css 的气泡爆炸动画

Javascript indexOf 和替换 - 我错过了什么吗

javascript - 使用 jQuery 通过循环验证一系列单选按钮

javascript - 在 React-Native 中关闭或最小化应用程序后恢复时如何调用函数

php - 直接用 PHP 编写元素的样式是否被认为是不好的做法?