CSS Flexible Box Layout on iPad

问题

I'm trying to get a very simple layout using the flex model working on iPad.

I have a containing div that is supposed to center the content divs.

The sample code does as intended across all browsers and platforms EXCEPT on the iPad (retina).

Using various iPad emulators online will not replicate the problem. I've only been able to replicate it on the actual iPad. Here's a screenshot of what it looks like:

Any and all advice will be appreciated very much.

CSS:

.container { 
width: 510px; 
height: 310px;
background: red; 
display: flex; 
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row; 
flex-wrap: wrap; 
-webkit-box-pack: center; 
-moz-box-pack: center; 
-ms-flex-pack: center; 
-webkit-justify-content: center;
justify-content: center; 
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items:center; 
border: 2px solid;
padding: 5px;
margin: 0;
}

.content {
float: left;
width: 150px;
height: 150px;
background: green; 
border: 2px solid;
padding: 0;
margin: 0;
}

.content2 {
float: left;
width: 150px;
height: 150px;
background: blue; 
border: 2px solid;
padding: 0;
margin: 0;
}

HTML:

<div class="container">
<div class="content">
<p>Content</p>
</div>
<div class="content2">
<p>Content2</p>
</div>
</div>

回答1:

You're missing some properties from the old 2009 draft (or have them named wrong). Your container CSS should look like this:

http://cssdeck.com/labs/ci9imeed

.container {
  width: 510px;
  height: 310px;
  background: red;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  border: 2px solid;
  padding: 5px;
  margin: 0;
}

Note, however, that none of the browsers with a 2009 Flexbox implementation (Android, older Safari, older Firefox) support wrapping.

来源：https://stackoverflow.com/questions/19028531/css-flexible-box-layout-on-ipad

标签

ios

css

ipad

flexbox