7

I need to distribute three items in the mobile portrait view. Used flex and it works in all others browsers except safari. so it is not working in iphone.

I have used align-content: space-between; and flex-flow: row wrap; together to get the alignment. What are the correct properties to be used to make it work in Safari?

-> Here is the fiddle

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
  height: 100%;
  margin: 0;
}
.wrap{
  display: -webkit-box;display: -ms-flexbox;display: flex;
  -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
  -ms-flex-line-pack: justify;align-content: space-between;
  width: 100%;
  border: 1px solid red;
  height: 100%;
  
  -webkit-flex-flow: row wrap;
   flex-flow: row wrap;

}
div[class*="col"]{
  height: 50px;
  width: 100%;
  border: 1px solid green;
}
<div class="wrap">
  <div class="col1">

  </div>
  <div class="col1">

  </div>
  <div class="col1">

  </div>
</div>
Brian
  • 3,850
  • 3
  • 21
  • 37
Felix A J
  • 6,300
  • 2
  • 27
  • 46

1 Answers1

5

Your code is missing the necessary -webkit- prefixes for older Safari versions:

display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
flex-direction: column;

-webkit-align-content: space-between;
align-content: space-between;

-webkit-flex-flow: row wrap;
flex-flow: row wrap;

References:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701