CSS Flexboxチュートリアル:基本

Flexboxは、CSSでページレイアウトを処理するための優れた方法です。アイテムの高さと幅を操作して、親コンテナ( "flex-container")内のすべてのスペースを占有し、各子( "flex-items")の垂直方向と水平方向のフローを制御できます。

フレックスボックスを初めて使用する場合は、すぐに始めるために必要なすべてを学ぶことができます。基本に立ち返り、最もよく使用されるフレックスボックスのプロパティについて適切な例を挙げて説明します。

CSS Flexboxとは何ですか?

従来のレイアウト(ブロックレイアウト、インラインレイアウト、テーブルレイアウト、配置レイアウト)とは異なり、Flexboxは複雑なユーザーインターフェイスレイアウトを設計するために最適化されたボックスモデルです。 CSSが要素のスタイル設定に使用されるのは事実ですが、CSS Flexboxは、HTMLを変更せずに、レスポンシブで流動的なレイアウトの構築、要素の配置、要素の方向付けと並べ替えに関して、効率的なソリューションをテーブルにもたらします。

言い換えると、CSSフレックスボックスを使用すると、要素は「柔軟」であり、サイズ変更と最適な配置を行って、最新のレスポンシブデザインを開発できます。

Flexboxの基本的な概念と用語

Flex-containerflex-itemは、flexboxレイアウトの基本コンポーネントです。 flex-containerは、 flex-itemsと呼ばれる子を含むページの親要素と見なすことができます。フレックスレイアウトの背後にある主な考え方は、フレックスコンテナ内のすべてのフレックスアイテムが、以下に示すように主軸または交差軸に沿って配置されることです。

主軸:フレックスアイテムが一列に並んでいる場合、主軸はその列に沿っています。一方、フレックスアイテムが列に配置されている場合、主軸は列に沿って配置されます。一言で言えば、 flex-directionは主軸を決定します。

交差軸主軸に垂直です。つまり、 flex-directionrowまたはrow-reverseの場合、主軸はフレックスコンテナの幅に沿って実行されるため、交差軸はフレックスコンテナの高さに沿って実行されます。一方、 flex-directioncolumnまたはcolumn-reverseの場合、主軸はフレックスコンテナの高さに沿って実行されるため、交差軸はフレックスコンテナの幅に沿って実行さます。

FlexコンテナのFlexboxプロパティ

表示プロパティ:

最初に行う必要があるのは、 displayプロパティをflexに設定することです。これはフレックスコンテナを定義します。さまざまなレイアウトの他の値は、 inlineblock 、およびinline-blockです。表示を保存することにより:flex;すべてのフレックスアイテムに対してフレックスコンテキストを有効にします

flex-directionプロパティ:

これは、フレックスコンテナ内の主軸の方向をカスタマイズするために使用されます。したがって、これはフレックスアイテムの方向が設定される定義プロパティです。値には、 row (デフォルト)、 row-reversecolumn 、およびcolumn-reverseを指定できます。

フレックスラッププロパティ:

フレックスコンテナ内のフレックスアイテムの数を増やそうとすると、デフォルトですべてが1行に収まるようになります。これを変更するには、 flex-wrapプロパティを設定して、アイテムを親コンテナ内の複数の行にラップします。 nowrap (デフォルト)、 wrap 、およびwrap-reverseの3つの値を受け入れます。

フレックスフロープロパティ:

これで、フレックスコンテナの主軸と交差軸がわかりました。 flex-flowプロパティは、 flex-directionプロパティとflex-wrapプロパティの省略形であるため、2つの軸を1つに結合します。したがって、デフォルト値はnowrapであり、さらに実験することができます。

justify-contentプロパティ:

justify-contentプロパティは、親flex-containerの子アイテムを整列するために使用されます。すべてのコンテンツは、主軸に基づいて配置されます。ただし、これらのアイテムに特定の高さまたは幅を指定すると、 justify-contentの動作が異なります。重要な点は、 justify-contentプロパティとalign-itemsプロパティをテストする前に、親コンテナ内に十分なスペースを確保することです。

justify-contentプロパティは、次の5つの方法で配置を行います。

 justify-content: flex-start;

これがデフォルト値です。すべてのアイテムは、親コンテナの先頭、つまり親コンテナの左上に配置されます。

 justify-content: center;

すべてのアイテムは、親コンテナの中央に梱包されています。

 justify-content: flex-end;

すべてのアイテムは、親コンテナの終了行に移動されます。

 justify-content: space-between;

すべてのアイテムが行に均等に分散され、最初のアイテムが最初に、最後のアイテムが最後になります。

 justify-content: space-around;

すべてのアイテムは、左側と右側に等しいスペースがあります。最初と最後のアイテムには、コンテナの端に対して1単位のスペースがありますが、隣接するフレックスアイテムの間には2単位のスペースがあることに注意してください。

align-itemsプロパティ:

アイテムの整列は、正当化コンテンツに似ていますが、わずかな違いがあります。ここでは、すべてのアイテムが交差軸(主軸に垂直)に基づいて配置されています。

align-itemsは、5つの異なる値を受け入れます。

 align-items: stretch;

これがデフォルト値です。すべてのアイテムは、コンテナを満たすために伸びます。

 align-items: flex-start;

すべてのアイテムは、コンテナの開始時にパックされます(クロス軸)。

 align-items: center;

すべてのアイテムは、クロス軸のフレックスコンテナrの中心に梱包されています。

 align-items: flex-end;

すべてのアイテムは、コンテナの最後(十字軸)に梱包されます。

 align-items: baseline;

すべてのアイテムは、ベースライン(テキスト)が整列するように整列されます。

align-contentプロパティ:

flex-containerに複数行のアイテムがあり、 flex-wrapプロパティがwrapまたはwrap-reverseに設定されていることを確認して、 align-contentプロパティを確認します。 justify-contentプロパティがflex-itemsを主軸内に整列させるので、 align-contentプロパティはそれらの線を交差軸に整列させるために必要です(余分なスペースがある場合)。

FlexアイテムのFlexboxプロパティ

align-selfプロパティ:

これにより、個々のフレックスアイテムの配置を調整できます。 flex-containerで設定したように、 align-itemsのすべてのプロパティを備えています。これを使用して、他の隣接するアイテムを邪魔することなく、単一のフレックスアイテムの位置を変更できます。 autoflex-startflex-endcenterbaselinestretchの6つの値を受け入れます。

注文プロパティ:

orderプロパティを使用すると、個々のアイテムに高次または低次を指定することで、フレックスコンテナに表示れるフレックスアイテムの順序を制御できます。デフォルトでは、すべてのアイテムがソース順に配置されます。

flex-growプロパティ:

これは、フレックスコンテナ内のフレックスアイテムの空間分布を定義します。たとえば、 flex-growプロパティが「2」に設定されているアイテムは、他のアイテムの2倍の使用可能スペースを占有しようとします。負の値は受け入れないことに注意してください。

フレックスシュリンクプロパティ:

デフォルトでは1に設定されています。必要に応じてフレックスアイテムを縮小できます。

flex-basisプロパティ:

特にwidthを使用してフレックスアイテムのサイズを設定する場合、通常はwidthプロパティを使用せず、代わりにflex-basisを使用します。デフォルトでは、 autoに設定されています。

フレックスプロパティ:

これは、 flex-growflex-shrink 、およびflex-basisプロパティの省略形であり、最後の2つのプロパティはオプションです。つまり、 flexプロパティを「1」に設定すると、 flex-growは1に設定され、 flex-shrinkflex-basisはデフォルト値になります。これらすべての個々のプロパティでスペースを占有するのではなく、この省略形のプロパティを使用することをお勧めします。

CSS:スタイルでサイトをデザインする

取り入れるべきことがたくさんあることを私たちは知っています、そしてあなたがあなた自身のプロジェクトでFlexboxを使うことに飛び込む準備ができていると確信しています。しかし、Flexboxでできることのほんの一部にすぎません。

CSSはいたるところにあります。サイトの背景画像の設定からCSSフレックスボックスを使用したレイアウトの設計まで、Webの管理方法に革命をもたらしました。これらの重要なプロパティはすべて、Web開発の過程で非常に役立ちます。この記事で学んだことを適用して、優れたレスポンシブレイアウトの作成を開始することもできます。ハッピーコーディング!