如何才能让这些div flex盒子缩水呢?
IE浏览器。 使这些:
进入这些:
http://jsfiddle.net/frank_o/35hk7L84/1/
就好像一个人要设置flex-direction: row; 除了我不能让他们在同一行上。
.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>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>最满意答案
以下是您正在查找的内容(更改各个元素的display ):
.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>有用的资源: https : //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
其他: http : //css-tricks.com/snippets/css/a-guide-to-flexbox/
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/
更多推荐
发布评论