根据显示器flexbox中的子设置父级高度/宽度

我正在使用Flexbox，但似乎有问题，当我尝试将父级div的高度/宽度设置为auto时。根据显示器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; 
}

但有色子项中只有一行，

有问题设置父级背景颜色a s每个孩子的记录宽度，如何使用Flexbox设置自动宽度。

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

请您可以建议最佳做法，以根据div的最大高度来安排项目。

来源

2015-06-03 i' m PosSible

显而易见的错字：'。父母“（删除空间）。 Flexbox不易使用，如果它可以帮助你，我已经设置了一个[玩玩它的小玩具]（http://codepen.io/jeremythille/pen/xbaPgM）。 –

删除'.'和'parent'之间的空格。 – evolutionxbox

@JeremyThille雅有错字的问题，但它不是我的解决方案..谢谢！ –

这里有几个问题需要解决。基于你的风格，“.child”是flex容器，而<li>元素是flex项目。

<li>不能嵌套在<div>。它需要与<ul>或<ol>一起使用。
我想你“.child”是容器弹性盒子。如果您使用的是IE11，则可以使用 “显示器：-ms-flexbox”工作（不显示：flex）（显示器：flexbox在IE11中不起作用）
remove“max-height：50px;”它会限制容器框（.child）的大小。你包含<li>。您将flex-direction设置为列，因此<li>元素将从上到下列出。那么你可以删除（.parent的宽度和高度）。
现在如果你想让.child的大小等于其元素的大小，那么你需要看看更多的边距：0px和display：inline子元素的块属性。

来源

2015-06-18 04:22:42

根据显示器flexbox中的子设置父级高度/宽度

回答

相关问题