ordering in css with 100% width

Question

I want child div with 100% width.

Is it possible or not ?

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 > http://jsfiddle.net/gobmo8sL/

Answer 1

Add flex-direction: column;

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

Answer 2

you can adjust the directing of the 'flex' display

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

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

Answer 3

Any reason for using display:flex for the parent div? If you remove that, you are getting a full width child. Also, if you are looking for a listing, go for

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

structure.