휴대 기기에서 행에서 열로 전환하지 않는 Flexbox

Question

휴대 기기에서 Flexbox를 사용하려고합니다. 특히 iPhone 및 컴퓨터 모니터와 같은 대형 화면에서는 3 가지 항목이 페이지 전체에 걸쳐 표시됩니다. 모바일 장치의 열에 표시됩니다. 나는 Cimmanon 사용자가 작성한 코드를 사용했습니다 : 3 Column Responsive CSS (Ordering Contents Positions) 가능한 한 가까이 가십시오. 나는 오랫동안 숙련 된 개발자 (주로 데이터베이스 작업)이지만 웹 개발에 대한 상대적으로 초보자이며 성공하지 못한 것에 좌절하고 있습니다.

Dreamweaver CC를 사용하여 코드를 작성합니다. 아래 CSS를 사용하면 내 페이지가 나타납니다. Chrome, IE 및 Firefox에서 업로드하고 테스트 할 때 페이지가 나타납니다. 결과가 나타납니다. 예상 : 브라우저 창 너비가 넓은 경우 3 항목, 너비가 좁은 경우 3 항목이있는 항목 그러나 내가 iPhone을 사용할 때, 내가 얻고 자하는 것이 칼럼 일 때 3 개의 항목으로 계속 행을 얻습니다.

저는 이제 이것에 많은 시간을 할애했으며 누구나 따라갈 수있는 도움에 감사드립니다. 미리 감사드립니다. 다음 여러 블로그에 기록 된 다른

/*** FLEXBOX ***************************************/ 
/* SECTIONS */ 
.section { 
    clear: both; 
    padding-top:50px; 
    margin: 0px; 
} 

.a { 
    background-color: #fff; 
    text-align: center; 
    padding-top: 20px; 
} 

.b { 
    background-color: #fff; 
    text-align:center; 
    padding-top:20px; 
} 

.c { 
    background-color: #fff; 
    text-align:center; 
    padding-top:20px; 

} 

/* GRID OF THREE   ============================================================================= */ 
@media only screen and (min-width: 640px) { 
    .span_3_of_3 { 
    width: 100%; 
    } 

    .span_2_of_3 { 
    width: 66.1%; 
    } 

    .span_1_of_3 { 
    width: 32.2%; 
    } 

    /* COLUMN SETUP */ 
    .col { 
    display: block; 
    float: left; 
    margin: 1% 0 1% 1.6%; 
    } 

    .col:first-child { 
    margin-left: 0; 
    } 
} 
@media only screen and (max-width: 640px) { 


    .section { 

    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    width: 100%; /* fix for Firefox */ 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
-webkit-box-direction: normal; 
-moz-box-direction: normal; 
-webkit-flex-direction: column; 
-ms-flex-direction: column; 
flex-direction: column; 
text-align: center; 
left: 0px; 
right: 0px; 
padding-left: 0px; 
    } 

    .a { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    -webkit-flex-order: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
    order: 1; 
    } 

    .b { 
    -webkit-box-ordinal-group: 2; 
    -moz-box-ordinal-group: 2; 
    -webkit-flex-order: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
    order: 2; 
    } 

    .c { 
    -webkit-box-ordinal-group: 3; 
    -moz-box-ordinal-group: 3; 
    -webkit-flex-order: 3; 
    -ms-flex-order: 3; 
    -webkit-order: 3; 
    order: 3; 
    } 
} 

Answer 1

, 아이폰 OS와 같은 mubile OSses 아직 플렉스 방향을 지원하지 않습니다

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html