使div在flex box里面收缩包装 [英] Making divs inside flex boxes shrink-wrap

问题描述

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

这些：

p>

进入这些：

http://jsfiddle.net/frank_o/35hk7L84/1/

就像设置

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

https://developer.mozilla.org/en-US/docs / Web / Guide / CSS / Flexible_boxes

其他： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

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里面收缩包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！