gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:30:49 25 4
gpt4 key购买 nike

我正在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com