iPad上的CSS灵活框布局 [英] CSS Flexible Box Layout on iPad

问题描述

我想要使用在iPad上使用flex模型得到一个非常简单的布局。

示例代码适用于iPad（retina）上的所有浏览器和平台。

在线使用各种iPad模拟器不会复制此问题。我只能在实际的iPad上复制它。下面是它的外观截图：

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>内容< / p> 
< / div> 
< div class =content2> 
< p> Content2< / p> 
< / div> 
< / div> 
  

解决方案

（或者他们命名错误）。您的容器CSS应如下所示：

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; 
} 
  

但是，请注意，没有一个2009年Flexbox实现的浏览器，旧版Safari，旧版Firefox）支持换行。

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>

解决方案

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.

这篇关于iPad上的CSS灵活框布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！