I am developing and app with phonegap. I wanted to use the flexbox to layout some buttons in my main application area.
Can somebody explain why this http://jsfiddle.net/apYLB/ doesn't wrap elements in latest chrome?
HTML:
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
CSS:
.flex-container {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: end;
-moz-box-align: end;
box-align: end;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content:space-around;
height:100%;
}
.flex-item {
margin:0 10px 25px 0;
width:86px;
border:1px solid #000;
}
.flex-item img {
max-height:80px;
}
They are laid horizzontally and only 3 and a half boxes appear.
See Question&Answers more detail:os