初心者向けのFlexBoxへの友好的な紹介

CSS Flexbox：1次元レイアウトツール

弾性ボックスレイアウトモジュールであるFlexBoxは、一連の同様のプロジェクトなどの1次元レイアウトを作成するためのCSSの強力なツールです。特にシングルローまたはシングル列のレイアウトに適しており、古いブラウザーのグリッドレイアウトの信頼できる代替品として使用できます。この記事では、わかりやすいFlexboxガイドが提供されます。

CSSグリッドレイアウトの出現にもかかわらず、FlexBoxにはまだ一意の価値があります。 2つの間には関数の重複がいくつかありますが、CSSレイアウトで異なる役割を果たします。一般的に、FlexBoxは1次元のレイアウト（例：一連の同様のプロジェクト）により適していますが、グリッドは2次元レイアウト（例：ページ全体の要素など）により適しています。

ただし、FlexBox

はフルページレイアウトにも使用できるため、グリッドをサポートしていないブラウザでは、グリッドレイアウトの効果的な代替品として使用できます。 （ほとんどの最新のブラウザではグリッドが急速に改善されていますが、FlexBoxにはまだ幅広いサポートがあります。これは、一部の古いブラウザで適切に動作するためにレイアウトが必要な場合は非常に実用的です。）

FlexBoxの利点 ：

が含まれます ページのコンテンツは、任意の方向（左、右、下、または偶数）にレイアウトできます。

コンテンツクリップの視覚順序は、逆転または再配置できます。

アイテムは、利用可能なスペースに応じて「柔軟に」サイズ変更でき、コンテナまたは互いに揃えることができます。
単階建ての列レイアウトを作成する（各列のコンテンツの量に関係なく）非常に簡単です。
• さまざまな特性と可能性を説明するために、この記事のいくつかのデモの例として、次の簡単なレイアウトを仮定しましょう。
• 最初のステップは、要素を
、つまり

および

に配置し、並んで表示することです。 FlexBoxがなければ、フロートを使用してこれらの3つの要素を配置することもできますが、これはそれほど直接的ではありません。さらに、従来の方法はよく知られている問題をもたらします。各列は、コンテンツの高さと同じ高さです。したがって、3つの列すべてに同じ高さを設定して、長さが一貫しているか、何らかのトリックを使用する必要があります。

<code class="language-html"><div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div></code>

FlexBoxが生まれました。

.main<nav></nav>FlexBox <aside></aside>

を使用してください

FlexBoxのコアは、

属性の

値です。これは、コンテナ要素として設定する必要があります。そうすることで、子供の要素が「弾性アイテム」に変わります。これらのアイテムは、デフォルトでいくつかの便利なプロパティを取得します。たとえば、それらは並んで配置され、指定された幅のない要素は残りのスペースを自動的に占有します。 したがって、

's

をdisplayに設定すると、そのflexの要素は

と

の間で自動的に圧迫されます。計算なしでは非常に便利ではありませんか？追加のボーナスとして、これらの3つの要素は魔法のように同じ高さを持っています。 .main

<code class="language-html"><div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div></code>

要素順序：flexboxorder属性

FlexBoxの別のプロパティは、要素の順序を簡単に変更できることです。クライアントの上記のレイアウトを構築したとしたら、彼女が.contentの前に<nav></nav>に表示されることを望んでいるとします。

通常、HTMLソースコードを掘り下げ、そこで注文を変更する必要があります。 FlexBoxを使用すると、CSSを介して完全にこのタスクを実行できます。 .content 'sorderプロパティを-1に設定するだけで、コンテンツ列が正面にあります。

<code class="language-css">.main {
  display: flex;
}</code>

この場合、他の列の値を明示的に宣言する必要はありません。 order CSSスタイルに依存しないFlexBoxを使用した

htmlソースコード

しかし、顧客はまだ満足していません。彼女は

がページの最初の要素であることを望んでいます。まあ、FlexBoxは再びあなたの友人です（この場合、単に従うよりもクライアントを教育する方が良いかもしれません）。内部要素と外部要素を再配置する必要があるため、<footer></footer>のルールを設定する必要があります。ウェブページにフレックスコンテナをネストして、必要な結果を達成できることに注意してください。 <header></header>、<div>、<code>display: flexは垂直に積み重ねられているため、最初に垂直コンテキストを設定する必要があります。また、<header></header>の値は-1であるため、最初にページに表示されます。そんなに簡単です。 <main></main> <footer></footer> flex-direction: columnしたがって、要素の行を列に変更したり、その逆に変更したい場合は、<footer></footer>属性を使用して、orderまたは（

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

がデフォルト）に設定できます。 >

ただし、能力が大きいほど責任が大きくなります。多くの訪問者がキーボードを使用してFlexBoxベースのWebサイトを閲覧することを忘れないでください。したがって、HTMLソースコードの要素の順序が画面、アクセシビリティは深刻な問題になる可能性があります。 flex-direction columnrowflexbox row

にアイテムを揃える方法

FlexBoxは、子供を水平および垂直に非常に直接整列させることもできます。

を使用して、フレックスコンテナ内のすべての要素に同じアライメントを適用できます。プロジェクトごとに異なるアライメントを設定する場合は、を使用してください。要素のアライメントは、

属性の値に依存します。その値が

（つまり、要素が水平に配置される）の場合、アライメントは垂直軸に適用されます。

が

（つまり、要素が垂直に配置される）に設定されている場合、水平軸に適用されます。 align-items たとえば、align-selfコンテナ要素内で異なる方法で整列する形状がいくつかあります。必要です：flex-direction

• 各形状のalign-selfプロパティを適切な値に設定します。考えられる値には、center、stretch（要素が容器に適合するように配置されている）、flex-start、flex-end、およびbaseline（要素はコンテナのベースラインに配置されます）が含まれます。
• コンテナ要素をdisplay: flexに設定します。
• 最後に、子要素の整列に影響があるため、親コンテナのflex-direction属性に注意を払ってください。

<code class="language-html"><div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div></code>

親コンテナ内のすべての要素を同じ方法で整列させる必要がある場合、親コンテナのalign-items属性を使用できます。考えられる値には、center、flex-start、flex-end、stretch（デフォルト：アイテムがコンテナに合うように伸びる）およびbaseline（アイテムはコンテナのベースラインに配置されています）が含まれます。

<code class="language-css">.main {
  display: flex;
}</code>

FlexBoxを使用してコンテンツを調整します別のアライメント属性は

です。これは、複数の要素間で利用可能なスペースを均等に割り当てる場合に非常に便利です。

justify-content許容値には、

、

、center、flex-start（アイテムの間にスペースがあります）とflex-end（アイテムの前、間、後にスペースがあります）が含まれます。 space-between たとえば、使用していた単純なHTMLテンプレートのspace-around要素内で、3つの要素の3つの要素を見つけることができます。現在、それらはすべてページの左側に押し込まれています。これらの3つの要素を何らかの形で表示して、最初と最後の要素の左端と右端にスペースを個別に作成するのではなく、それらの間にスペースを作成する場合は、

（親コンテナ）を

に設定します。 ：<main></main> <nav></nav> .content<aside></aside>FlexBoxを使用してプロジェクトサイズを調整します.mainjustify-content space-between

属性を使用すると、フレックスコンテナ内の他の要素に対する要素の長さを制御できます。

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

このプロパティは、次のプロパティのそれぞれの略語です。

- 他の弾性要素に比べて要素がどれだけ成長するかを指定する数字。

flex

- 他の弾性要素に対してどの程度の要素が収縮するかを指定する数字。

- 要素の長さ。許容可能な値には、
• 、flex-grow、または「％」、「px」、「em」、またはその他の長さの単位が続く数値が含まれます。
• たとえば、flex-shrinkモノスペースの3つの列を取得するには、各列の
を設定するだけです。
• flex-basisコンテンツ領域をautoおよびinheritの2倍の幅にする必要がある場合は、
に対して

を設定し、他の2倍を1：

に残します。 flex: 1

その他のリソース

<code class="language-css">.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}</code>

<nav></nav><aside></aside>結論.contentflex: 2ご覧のとおり、Webサイト上の要素の場所を制御する必要がある場合、FlexBoxは私たちの生活をずっと楽にすることができます。それは非常に信頼性が高く、トリック、折りたたみ式の容器、または私たちが毎日時代遅れに対処しなければならない他の奇妙なものを作ります。

前述のように、今日のフルページレイアウトのより良いオプションはCSSグリッドですが、FlexBoxの機能の範囲を知る価値があります。 FlexBoxは、関連アイテムを1つの次元に合わせるのに最適ですが、必要に応じて古いブラウザーで動作するグリッドに便利な代替品にすることもできます。

CSS FLEXBOX （元のドキュメントと一致するように、ここによくある質問を追加する必要があります）