5

フレキシブルボックスレイアウトモジュールの仕様が変更され、一部のブラウザでは複数のバージョンが実装されていることを知っています（異なる構文を使用）。情報を探していましたが、古くなっているという警告のあるチュートリアルしか見つかりません。

仕様が再び変更される可能性があることはわかっていますが、通常とは異なるユースケース（Chrome拡張機能）があり、現在の形式で使用したいと考えています。Chromeに実装されている最新バージョンの使用方法を知りたいだけです。

最新のチュートリアルを知っている人はいますか？

4

4 に答える 4

7

これは私がこれまでに見つけた最高のフレックスボックスチュートリアルです。これは非常によく説明されています。より詳細な説明が必要な場合は、w3cドラフトを確認してください。

また、フレックスボックスモデルのテストと理解を深めるために、このフレックスボックスの遊び場を確認してください。

于 2013-02-10T09:53:25.213 に答える
1

Flexboxモジュールはまだ時代遅れではありません。新しいモデルの実装には時間がかかり、おそらく実装には1年かかります。

W3Cには、標準のドキュメントと、実装されていないかどうかのメモが常にあります。

これが現在のFlexboxレイアウトモジュールです。

これは、新しい仕様のFlexbox LayoutModule2012の編集者によるドラフトです。

于 2012-06-04T16:04:50.663 に答える
1

実装が過去に変更されたため、flexboxの2つの主要な実装が知られています。このページでは、新旧の実装に関する背景情報を提供します。

Flexboxの実装の現在の状況についての良いチュートリアルをここで見つけました。

ページのHTML構造のサンプルコード（Codepenのデモはこちら）：

<div class="page-wrap">

  <section class="main-content" role="main">
    Main content: first in source order
  </section>

  <nav class="main-nav" role="navigation">
    Links
  </nav>

  <aside class="main-sidebar" role="complementary">
    Sidebar
  </aside>

</div>

page-wrapサイドバーの2倍の大きさで3つに分割するにmain-navは、フレックスボックスを使用できます。もう1つの利点はmain-content、DOM内の要素の位置が前にあることmain-navですが、flexboxを使用すると、コンテンツの前に要素をレンダリングできます。これはスクリーンリーダーに役立ち、コンテンツが最初に読み取られます。

page-wrapフレックスボックスコンテキストを作成する必要があります。このようにして、すべての子がフレックスボックスアイテムになります。

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

プロパティの順序は重要です。一部のブラウザは両方の実装をサポートしているため、古いプロパティの下に最新のプロパティを指定する必要があります。これは、display-propertyのプレフィックスが付いていないためです。

アイテムの幅を追加するには：

.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

最後に行う必要があるのは、アイテムの順序を変更することです。これはmain-nav、main-content

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}
于 2013-05-02T14:15:56.580 に答える
0

html5please.comの厚意により、Flexboxの仕様は安定していると見なされており、 OperaとMozillaにチュートリアルがあります。

html5pleaseが依然として避けることを推奨している理由がわかりません。そのテキストは反対を示唆しているようです。

于 2012-10-24T21:00:41.073 に答える