[転載]レスポンスデザインの未来——Flexbox

11021 ワード
css 3 応答式 Flexbox

本文は大砂漠がBen Gremillionの《Responsive Design of the Future with Flexbox》によって訳したので、全体の訳文は私達自身の理解と思想を持って、もし訳すのがよくないあるいは間違っているところはまた同業者の友达に指導してもらいます.この訳文を転載する必要がある場合は、英語の出典を明記する必要があります.http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox、および作成者に関する情報
——著者:Ben Gremillion
——大砂漠
CSSでは、フローティングはテーブルの代わりにレイアウトにサービスし、代わりに、テーブルよりずっと使いやすいです.しかし、彼らはまだ限られている.CSS Flexible Boxレイアウトモジュールと呼ばれる推奨ソリューションがあり、一般的にFlexboxと呼ばれています.
FlexboxはCSS 3の推奨方法であり、デザイナーがページをよりよく制御する要素を助けるために使用され、比較的良い解決策がない前に、Flexboxは他の現代的なレイアウト案よりも強い.
本当に、Flexboxのサポートは今でも制限されているので、私たちはまだ使用していません.しかし、Flexboxがブラウザの友好的なサポートを受けている場合、メディアクエリーの弾力性のあるレイアウトを加えると、WebデザイナーはWebレイアウトに革命的な変化をもたらします.
CSSの痛み
このチュートリアルを書くとき、Flexboxをサポートするブラウザは限られています.Chromeブラウザは、自身のプレフィックス「-webkit-」を追加して認識する必要があります.他のWebkitカーネルブラウザ、特にモバイル端末のSafariとAndroidブラウズサポートは限られています.マイクロソフトIEはIE 10しかありません.しかし、このFlexbox仕様自体は絶えず変化しており、過去数年で彼に関する多くの変化を見た.しかし、仕様の決定とブラウザの後期の開発に伴い、Flexboxは最終的に設計上のレイアウトに使用される重要な属性になります.以下では、主に応答設計に適用する方法について説明します.
コンテナ(Containers)
Flexboxレイアウトでは、いくつかのアイテムを包むために「
」などの要素を含むコンテナを作成する必要があります.最も基本的には、Flexboxは伸縮項目を1つの線上(主線、側線)に配置し、HTML構造を変更する必要がなく、同じベースライン上の任意の配置を実現します.次の例を示します.
<div>     
    <p>1</p>    
    <p>2</p>    
    <p>3</p> </div>

[转载]响应式设计的未来——Flexbox_第1张图片
上記の例では、3つの伸縮項目をflex-directionプロパティで使用して、伸縮コンテナの最初と最後に配置するか、水平または垂直に配置することができます.Webページでは、HTML構造を変更せずにレイアウト全体が再配置される可能性があることを意味します.これは名実ともに応答的な設計になります.
「display:block」を使用すると、要素がブロック形式で垂直に配置され(フローティングされない場合)、「display:inline」は要素ラップテキストを同じ行に維持し、「display:flex」はデザイナーに方向、順序、位置合わせ方法、間隔を変更させることができます.リストレイアウトの観点から、Flexboxレイアウトはどのシリーズの製品にも適用されます.Flexboxで使用可能な用途は次のとおりです.
  • 列、ヘッダー、フッター、サイドバーの位置をすばやく調整する
    • .
  • 自動計算ナビゲーション間隔
  • は、より少ないHTMLがCSSを使用してより多くのレイアウトを実現することを意味する
  • は、ランダム物品が同一系列にあることを考慮して用いる.importantは上部を自由に移動して表示します.

    • 最も重要なのはFlexboxがデザインのビジュアルスタイルに与える影響に注意することです.要素が画面に表示される順序を再配置することは、HTML構造とJavascriptのフレームワークやスクリーンリーダーの読み取りに影響しません.
    整列(ALIGNMENT)
    方向に加えて、伸縮項目が伸縮容器の開始位置(すべて左)、終了位置(すべて右)、中央、および1つの間隔に押される可能性があります.伸縮コンテナに「justify-content」プロパティを追加して、伸縮項目間の位置合わせを制御できます.開始、終了などです.
    [转载]响应式设计的未来——Flexbox_第2张图片
    上図の伸縮項目配列に隠されている線を「主軸(main axis)」と呼びます.ここでの例では、ナビゲーションのリンクを主軸線(表示される黒い線)に沿って、必要に応じて自動的に空間を変更します.
    各主軸には方向(flex-direction)とフロー(flex-fow):水平方向に左または右(rowまたはrow-reverse)があります.垂直方向には下向きと上向き(columnとcolumn-reverse)があります.上記の例の最初のflex-rowはrowと設定されており、「flex-start」が伸縮項目を左に押すことを意味します.flex-rowが「row-reverse」に設定されている場合、最後の例のように「flex-start」は伸縮容器の一番右側に押されます.
    小包(WRAPPING)
    一連の伸縮項目が伸縮容器の終点位置に達すると、伸縮項目を1行または複数行に表示することができ、従来のインライン要素と同じです.
    上のアトリビュートを伸縮コンテナに適用します.その他は、各伸縮項目に適用されます.
    指順(ORDER)
    最後の主要なプロパティ(応答設計に関するもの)は、要素の正確な順序を制御するために使用されます.
    [转载]响应式设计的未来——Flexbox_第3张图片
    デフォルトでは、伸縮コンテナの各伸縮項目にはorder:0アトリビュートがあります.いずれかの伸縮項目に「order:1」を設定すると、この伸縮項目が主軸に沿って右(側軸下)に押されます.伸縮項目のorder値が0より小さい場合、たとえば「order:-1」を設定すると、この伸縮項目は主軸に沿って左(側軸方向)に押されます.
    Flexboxのサイドシャフトには、スピンドルと同じ属性機能があります.これまで、応答設計に影響を与える主な属性は「flex-direction」、「flexbox-justify」、orderであった.
    FlexboxとMedia Queries
    応答設計では、異なる画面サイズで異なるレイアウトが必要です.残念なことに、いくつかのレイアウトでは、HTMLには、画像がタイトルの前にあるか、画像がタイトルの後ろにあるかなどの特定の方法が必要です.FlexboxはCSSによってより多くのシフトを制御することができ、これによりウェブデザイナーはメディアクエリーを通じて異なる画面サイズに異なる構成を適用することができる.
    ここには挑戦的な例があります.ニュースサイトが最新の文章の断片を展示したいと思っています.各クリップには、サムネイルと異なる数のテキストがあります.3つのレイアウトスタイルが必要です:デスクトップのワイドスクリーン;ノートパソコンの中サイズスクリーンとスマートフォンの320 px幅.アクセス性は、Webサイトのタイトルにナビゲートしたり近づけたりする必要がありますが、バージョンメーカーはできるだけ大きなタイトルを強調したいと思っています.
    [转载]响应式设计的未来——Flexbox_第4张图片
    HTML構造
    この例では、構造を明確にするために、簡単なHTML構造を使用します.
    <html>
<body>
<div class="wrapper">
  <header>
    <img src="images/trendy-logo.png" />
  </header>
  <nav>
    <a href="#">home</a>
    <a href="#">about</a>
    <a href="#">other</a>
    <a href="#">contact</a>
  </nav>
  <section>
    <article>
      <figure><img src="images/box.png" /></figure>
      <div>
        <h2>Sample headline goes here</h2>
        <p>Sample text sample text sample text sample text sample text sample text sample text </p>
      </div>
    </article>
    <article>…</article>
  </section>
</div>
</body>
</html>

    いくつか重要な事項があります.
  • コンテナがページ全体を包んでいます.
  • タイトルとナビゲーションリンクは、文章リスト領域
    の前の
    • にある.
  • 各文章は独立した章で
    に置かれている.

    • Media Queries条件
    3つの応答ブレークポイントを設定しました.狭いスクリーン、中スクリーン、広いスクリーンです.
    @media only screen and (max-width: 480px) {
 … /*    */ 
} 


@media only screen and (min-width: 481px) and (max-width: 960px) { 
  … /*    */
} 


@media only screen and (min-width: 961px) { 
  … /*    */ 
}

    狭い画面:交互アイコンと再配置構造
    1、まず、伸縮容器として「
    」要素を指定します.これらの例では、Chromeをサポートするために「-webkit-」接頭辞を使用します.
    article {     display: -webkit-flex;     -webkit-align-items: start; }

    2.次に、すべての記事リストの方向を設定します.
    article:nth-child(odd) {       -webkit-flex-direction: row; } article:nth-child(even) {       -webkit-flex-direction: row-reverse; 
}

    3、内容をナビゲーション表示より優先し、「.wrapper」を伸縮容器に設定し、伸縮流の方向を「column」に設定する必要があります.
    .wrapper {     display: -webkit-flex;     -webkit-flex-direction: column; }

    4、最後に、
    あなたのコンポーネントを千変万化させ、Vue slotは微細に分析します.
    半日は素早くvueで小さなゲームを作ります——“馬雲のお金を使い果たします”