CSS Flexbox＃1。 最初のFlexboxレイアウトの作成

公開: 2022-02-16

2018年の終わりに、フロントエンドのWebデザインに革命をもたらすレイアウトツールであるCSSグリッドに関する本を出版しました。 CSSグリッドは完全にCSSにネイティブであり、列と行を使用してグリッドベースのレイアウトシステムを作成できます。

「CSSGridExplained」は、すぐに私たちのベストセラー本の1つになりました。 そのため、その本の大規模な更新と拡張に取り組んでいます。 また、新しい本「FlexboxExplained」の制作も開始しています。 FlexboxはCSSグリッドと密接に関連していますが、顕著な違いがあります。

  • Flexboxは1次元のレイアウトモデルです。 列または行のいずれかを管理できます。
  • CSSグリッドは2次元のレイアウトモデルです。 列と行の両方を管理できます。

今後数週間で、「Flexbox Explained」を作成しながら、一連のFlexboxチュートリアルを公開する予定です。 この最初のチュートリアルでは、CSSFlexboxの基本的な概念と実際の例を示します。

Flexboxの概要

CSS Flexbox仕様は、コンテナ（ flex-container ）内のアイテム（ flex-items ）を含むレイアウトを記述しています。 これらのアイテムは、利用可能なコンテナスペースに応じて、幅や高さを拡大または縮小できます。 アイテムは、可能な限り最良の方法で親コンテナに合うように「フレックス」します。

これらの「屈曲した」アイテムは、任意の方向（インライン軸またはブロック軸）に配置できるため、画面のサイズ（幅または高さ）またはその方向を変更するときに多くの柔軟性を提供します。

このリンクをクリックすると、FlexboxW3Cの仕様を確認できます。

ステップ1。 HTMLを作成する

サンプルコードを使用してHTMLファイルを作成することから、この例を始めましょう。 私はあなたのためにいくつかのHTMLを用意しました-それは3つの子要素を持つコンテナです。

  • お好みのコードエディタを開きます。
  • 空のHTMLファイルを作成します。
  • このページにアクセスして、HTMLコードをコピーします
  • そのコードをHTMLファイルに貼り付けます。

ステップ2。 CSSを作成する

3つの要素を持つコンテナができたので、スタイリングを追加しましょう。

  • style.cssというCSSファイルを作成します。 。 このファイルをHTMLファイルと同じフォルダーに配置します。 このCSSファイルへのリンクはすでにHTMLファイルのタグに含まれています
  • このコードをコピーして貼り付けます。これはCodepenでも入手できます。

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

この画像は、ブラウザでHTMLファイルを開いたときにコードがどのように表示されるかを示しています。 3つの子アイテムは、親コンテナと同じ幅です。 高さは各アイテムの内容によって決まります。 すべての側面に2rem（デスクトップ画面では約32px）のパディングがあることに注意してください。

CSS Flexbox＃1。最初のFlexboxレイアウトの作成

ステップ3。 CSSフレックスボックススタイル

次に、このチュートリアルのFlexbox部分を開始します。

  • CSSファイルを編集し、次のコードを追加します。

 .container { display: flex; }

この画像は、コードがどのように表示されるかを示しています。

変化したこと？ 技術面では、親コンテナはflex-containerなりました。 子要素はflex-itemsに変わりました。

なぜコンテナのサイズが変わったのですか？ フレックスアイテムは、親コンテナほど広くはありません。 それらは現在、それらの中のコンテンツと同じくらい広いです。 flex-itemsは、左側にフロート要素として表示されます。 それらはインライン要素のように動作します。

親コンテナの幅を明確に確認するために、 background-colorを適用できます。

  • CSSコードを編集し、次のコードを追加します。

 .container { display: flex; background-color: #f5ca3c; }

コンテナがどのように表示されるかを次に示します。

flex-containerが（ほとんど）ブロックレベルの要素のように動作することはすでにお気づきです。 ただし、コンテナをインラインレベルの要素のように動作させることもできます。 これを行うには、 displayプロパティの値をinline-flexに変更します。

  • CSSコードを編集します。

 .container { display: inline-flex; background-color: #f5ca3c;

次の画像に示すように、フレックスコンテナはインラインレベルの要素になりました。

このチュートリアルを続ける前に、動作をブロックレベルの要素に変更しましょう。

  • CSSコードを編集します。

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

ステップ4。 Flexboxの行を列に変更する

これまでに、 flex-containerを作成しました。 また、このコンテナの子がflex-itemsに変換されたときの動作も確認しました。

それでは、レイアウトの方向を変更する方法を学びましょう。 flex-containerのデフォルトの方向は行ベースです。 ただし、 flex-directionプロパティを使用してこの動作を変更できます。

  • CSSコードを編集します。

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

コードを更新した後、 flex-direction: rowがデフォルト値であるため、変更は表示されません。 本当に目に見える変更を加えましょう： flex-containerの方向をcolumnに編集します。

  • CSSコードを編集します。

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

次の画像は、レイアウトの変更を示しています。

これで、 flex-containerの方向はブロック軸（列）に基づきます。 flex-itemsは上から下に配置され、これらのアイテムのそれぞれが親コンテナの全幅を取ります。 したがって、それらはブロック要素のように動作します。

さて、この時点で疑問を持ち始めるかもしれません。「ねえ、私のレイアウトはこのチュートリアルの最初のレイアウトとまったく同じに見えます！ 」それは本当です。 視覚的には、 flex-containerを使用したこの現在のレイアウトと、ブロックコンテナを使用したこの例の最初のレイアウトに違いはありません。

ただし、現在はより詳細に制御できます。 たとえば、 row-reverse reverseプロパティとcolumn-reverseプロパティを使用して、 flex-itemsの方向を反転できます。

  • CSSコードを編集します。

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

この画像は、この新しい更新後にレイアウトがどのように表示されるかを示しています。

flex-itemsが連続して反転していることを確認するには、 flex-directionプロパティの値を変更します。

  • CSSコードを編集します。

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Flexboxの概要

おめでとう！ flex-containerを宣言する方法を学びました。 親コンテナ（ rowまたはcolumn ）に適用されたflex-directionに応じてフレックスflex-itemsがどのように動作するかを見てきました。 また、 flex-itemsの順序を逆にする方法も知っています。

これらの変更はすべてCSSで行われるため、サイトのHTMLマークアップの構造には影響しません。 これは、Flexboxを使用する利点の1つです。 flex-itemsの順序を逆にすることは、このCSSモジュールの機能の1つにすぎません。 Flexboxについて学ぶことはまだまだたくさんあるので、数日後にこのチュートリアルのパート2に注目してください。

このシリーズのその他のチュートリアル

  • CSS Flexbox＃2。 justify-contentプロパティの使用方法
  • CSS Flexbox＃3。 align-itemsプロパティ
  • CSS Flexbox＃4。 flex-growプロパティ