There is a wealth of information on the web regarding CSS3 properties like box, flexbox, and flex. As far as I know, flex is the current method under development. Therefore, on Webkit browsers we would use properties like display: -webkit-flex, -webkit-flex: 1 auto...
However, my question is: how can I achieve something similar to box-pack: start using flex?
Please refer to this specific example (compatible with Webkit only). I am trying to align elements at the top, but they are spreading out. It should resemble something like this workaround example (although not ideal for my scenario due to maintenance issues). How can I resolve this issue?
NEED TO FIX
HTML
<div class="body">
<h1>Test</h1>
<div class="box" style="width: 80%"></div>
<div class="box" style="width: 20%"></div>
<div class="box" style="width: 20%"></div>
<div class="box" style="width: 20%"></div>
<!-- (NEED TO FIX) EMPTY SPACE -->
</div>
CSS
h1 {
-webkit-flex: 1 100%;
}
.body {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
height: 400px;
}
Note that the h1 should occupy all space in line 1, 2nd and 3rd .box elements will move to line 2, while the 4th and 5th .box elements will be on line 3. Additionally, I need the .body element (which is taller than its content) to have empty space at the bottom.
HACKISH SOLUTION :-(
HTML
<div class="body">
<h1 style="height: 40px;">Test</h1>
<div class="box" style="width: 80%; height: 20px;"></div>
<div class="box" style="width: 20%; height: 20px;"></div>
<div class="box" style="width: 20%; height: 20px;"></div>
<div class="box" style="width: 20%; height: 20px;"></div>
<div class="hackish"></div>
<!-- NOTE THIS .hackish :-( -->
</div>
CSS
.hackish {
width: 100%;
height: 100%;
}
Are there any suggestions for a solution?