使div在flex box里面收缩包装

本文介绍了使div在flex box里面收缩包装的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使这些div弹出框收缩包装？

这些：

进入这些：

就像设置

 
 
  
 
  .main {display：flex; flex-direction：column; / * flex-direction：row; * /}。其他{color：white;背景：蓝色; margin：10px;}  
 < div class = > < div class =other> < p> Hello world< / p> < / div> < div class =other> < p> Hello other world< / p> < / div>< / div>  
 
 
解决方案
这里是你正在寻找（更改显示的个别元素）：
 
 
  
 
  .main {display：inline-flex; flex-direction：column;}。其他{color：white;背景：蓝色; margin：10px; display：table;}  
 < div class = > < div class =other> < p> Hello world< / p> < / div> < div class =other> < p> Hello other world< / p> < / div>< / div>  
 
 
 
 
   
 
 
 其他： 
 
How would one go about making these div flex boxes shrink-wrap?
Ie. making these:
Into these:
http://jsfiddle.net/frank_o/35hk7L84/1/
As if one were to set flex-direction: row; except I can't have them on the same line.
.main {
    display: flex;
    flex-direction: column;
    /* flex-direction: row; */
}
.other {
    color: white;
    background: blue;
    margin: 10px;
}
<div class="main">
    <div class="other">
        <p>Hello world</p>
    </div>
    <div class="other">
        <p>Hello other world</p>
    </div>
</div>
 解决方案 
Here is what you are looking for (change the display of the individual elements):
.main {
  display: inline-flex;
  flex-direction:column;
}

.other {
    color: white;
    background: blue;
    margin: 10px;
    display:table;
}
<div class="main">
    <div class="other">
        <p>Hello world</p>
    </div>
    <div class="other">
        <p>Hello other world</p>
    </div>
</div>
Useful resources: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Other: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
                        这篇关于使div在flex box里面收缩包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！