在css中以100％宽度排序

Question

我想要100％宽度的儿童div。

有可能吗？

HTML

<div class="main">
    <div class="order2">order2</div>
    <div class="order1">order1</div>
</div>

CSS

.main{
    display: flex;
}

.order1{
 order:1;
 width:100%;
}
.order2{
 order:2;
width:100%;
}

link＆gt; http://jsfiddle.net/gobmo8sL/

Answer 1

你可以调整＆＃39; flex＆＃39;显示

.main{
    display: flex;
    flex-direction: column;
}

http://jsfiddle.net/gobmo8sL/2/

Answer 2

添加flex-direction：列;

.main{
display: flex;
flex-direction: column;
}

Answer 3

使用display的任何原因：flex为父div？如果你删除它，你得到一个全宽的孩子。此外，如果您正在寻找列表，请转到

<ul> <li> </li></ul>

结构。