0

Flexbox をモバイル デバイス、具体的には iPhone 5 で動作させようとしています。私の目標は、iPad やコンピューター モニターなどの大きな画面のページと、モバイル デバイスの列に 3 つのアイテムを配置することです。ユーザー Cimmanon によって作成されたコードを使用しました。私は長い経験を積んだ開発者 (主にデータベース作業) ですが、Web 開発に関しては比較的初心者であり、成功していないことに不満を感じています。

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

1 に答える 1

-1

その後、多くのブログに書かれているように、iOS のようなモバイル OS はまだフレックス方向をサポートしていません。

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

于 2013-08-31T18:02:43.623 に答える