次のページフレックスボックス(Flexbox)は、項目を行または列にレイアウトするための1次元のレイアウト方法です。項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。この記事では、すべての基本事項について説明します。学習目標:フレックスボックス・レイアウトシステムを使用してウェブのレイアウトを作成する方法を習得する。レイアウトを作成するために利用可能な唯一の信頼できるクロスブラウザー互換ツールはフロートと位置指定のようなものでした。これらは問題なく機能しますが、いくつかの点ではかなり限定的でイライラするものです。次のような単純なレイアウト要件は、このようなツールを使用しても、便利で柔軟な方法で実現するのが困難または不可能です。コンテンツのブロックをその親内で垂直方向に中央揃えにします。コンテナのすべての子が、使用可能な幅や高さに関係なく、使用可能な幅や高さについて等しい量を占めるようにします。複数列レイアウトのすべての列に、異なる量のコンテンツが含まれていても、同じ高さを採用するようにします。以降のセクションで見るように、フレックスボックスは多くのレイアウト作業をずっと簡単にします。さあ始めましょう!簡単な例の紹介この記事では、フレックスボックスがどのように機能するのかを理解するのに役立つ一連の演習を進めていくようにします。)にロードして、コードエディタでコードを確認してください。ここでもライブを見ることができます。これらを使用して、かなり標準的な3列のレイアウトを作成します。box)としてレイアウトするかを選択する必要があります。特別な値を設定します。設定します(これがフレックスコンテナになります)。flex;}この結果は次のようになります。同じ幅の列を持つ複数列のレイアウトがあり、列の高さはすべて同じです。これは、フレックス項目(フレックスコンテナの子)に与えられるデフォルト値が、このような一般的な問題を解決するために設定されているためです。それらについての詳細は後で。値として設定することもできます。フレックスモデルのさておき要素が柔軟な箱として配置されるとき、それらは次のように2つの軸に沿って配置されます。axis)は、フレックス項目が配置されている方向に走る軸です(例えば、ページを横切る行、またはページ下の列として)。end)と呼ばれます。axis)は、フレックス項目が配置されている方向に対して垂直に走る軸です。end)と呼ばれます。container)と呼ばれます。次のセクションを進むときには、この用語集のことを覚えておいてください。使用されている用語のいずれかについて混乱した場合は、いつでもここを参照することができます。いうプロパティを提供します。設定されていて、ブラウザーのデフォルト言語が動作する方向(英語のブラウザーの場合は左から右に)にそれらが横一列にレイアウトされます。<section>)の規則に追加してみてください。追加する前と同じように、項目が縦一列のレイアウトに戻されます。先に進む前に、この宣言を例から削除してください。値を使用して、フレックス項目を逆方向にレイアウトすることもできます。これらの値も試してみてください!ラッピングレイアウトの幅や高さが決まっているときに発生する問題の1つは、最終的にはフレックスボックスの子がコンテナをオーバーフローさせてレイアウトが壊れることです。例を見て、それをライブで見てみてください(この例に沿って進めたい場合は、このファイルのローカルコピーを取ってください)。ここで実際に子がコンテナから抜け出しているのを見ます。これを修正できる1つの方法は、<section>)の規則に次の宣言を追加することです。規則に次の宣言を追加します。200px;試してみてください。これが含まれていると次のようにレイアウトがはるかに良く見えることがわかります。多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。幅になることを意味します。このプロパティについては後で詳しく説明します。最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。ここでできることは他にもあります。変更してみてください。これで、まだ複数行のレイアウトがあることがわかりますが、ブラウザーウィンドウの反対側の隅から開始して逆方向に流れます。一括指定が存在することに注目する価値があります。次のように置き換えることができます。wrap;フレックス項目の柔軟なサイズ変更それでは、最初の例に戻って、フレックス項目の占めるスペースの割合を制御する方法を見てみましょう。コピーを入手してください(ライブで見る)。下に次の規則を追加します。1;}これは、各フレックス項目が主軸に沿って使用可能なスペースのうちどれだけを占めるかを決定する、無単位の割合値です。パディングやマージンなどを設定した後の残りの予備スペースのうちから、すべてが同じ量を占めます。値を指定してもまったく同じ効果があることを意味します。それでは、前の規則の下に次の規則を追加します。他の2つの幅の2倍の幅を占めます。割合単位が使用可能です。