Bố cục hộp linh hoạt CSS trên iPad

Question

Tôi đang cố gắng để có được bố cục rất đơn giản bằng cách sử dụng mô hình flex hoạt động trên iPad.

Tôi có div chứa div được cho là tập trung vào div nội dung.

Mã mẫu không như dự định trên tất cả các trình duyệt và nền tảng EXCEPT trên iPad (võng mạc).

Sử dụng nhiều trình mô phỏng iPad trực tuyến sẽ không sao chép sự cố. Tôi chỉ có thể tái tạo nó trên iPad thực tế. Dưới đây là một ảnh chụp màn hình của những gì nó trông giống như:

Bất kỳ và tất cả những lời khuyên sẽ được đánh giá rất nhiều.

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> 

Answer 1

Bạn đang thiếu một số tính chất từ ​​dự thảo cũ 2009 (hoặc đã họ được đặt tên sai). CSS container của bạn sẽ trông như thế này:

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

Lưu ý, tuy nhiên, không ai trong số các trình duyệt với một Flexbox thực hiện năm 2009 (Android, cũ Safari, Firefox cũ) hỗ trợ gói.