モバイル開発のための柔軟なレイアウト（フレックスレイアウト）

モバイル開発のための柔軟なレイアウト（フレックスレイアウト）

前書き

ウェブページを作る過程で、レイアウトは私たちの最も重要なリンクであり、レイアウトの品質はウェブページ全体の成功または失敗に直接影響すると言えます！

レイアウトが成功した場合、半分の労力で2倍の結果が得られます。レイアウトが失敗した場合、半分の労力で2倍の結果が得られます。

モバイルインターネットの出現により、レスポンシブWebサイトが人気になりました。これはまた、新しいタイプのレイアウト、つまり柔軟なレイアウトを生み出しました。

柔軟なレイアウトは、以前の「display + float + position」レイアウトフォームを置き換え、新しい柔軟なレイアウトを使用して、Webサイトを滑らかにします。

フレックスレイアウトとも呼ばれるフレキシブルレイアウトは、2009年にW3Cによって導入されたレイアウト方法であり、さまざまなページレイアウトを簡単に、完全に、応答性よく実装できます。

現在、すべてのブラウザでサポートされているため、この機能を非常に安全に使用できるようになりました。

今日は、柔軟なレイアウトについて一緒に学びましょう。

Flexレイアウトとは何ですか？

FlexはFlexibleBoxの略語で、「フレキシブルレイアウト」を意味し、ボックスモデルに最大限の柔軟性を提供するために使用されます。

• どのコンテナもFlexレイアウトとして指定できます。

.box{
    
    
  display: flex;
}

• インライン要素はFlexレイアウトを使用することもできます。

.box{
    
    
  display: inline-flex;
}

• Webkitカーネルブラウザには、プレフィックスとして-webkitを付ける必要があります。

.box{
    
    
  display: -webkit-flex; /* Safari */
  display: flex;
}

注：フレキシブルレイアウトを設定すると、子要素のfloat、clear、vertical-align属性は無効になります。

Flexレイアウトの基本概念

• Flexレイアウトを使用する要素は、Flexコンテナ、または略して「コンテナ」と呼ばれます。
• そのすべての子要素は、自動的にコンテナのメンバーになります。これは、フレックスアイテム（フレックスアイテム）、または略して「アイテム」と呼ばれます。

上の図に示すように、コンテナにはデフォルトで2つの軸があります。水平主軸（主軸​​）と垂直交差軸（交差軸）です。

• 主軸（フレームとの交点）の開始位置をメインスタートと呼び、終了位置をメインエンドと呼びます。

• クロス軸の開始位置をクロススタート、終了位置をクロスエンドと呼びます。

• デフォルトでは、アイテムは主軸に沿って配置されます。1つのプロジェクトが占める主軸スペースはメインサイズと呼ばれ、占有される交差軸スペースはクロスサイズと呼ばれます。

Flexコンテナのプロパティ

次の6つのプロパティがFlexコンテナに設定されています

• フレックス方向
• フレックスラップ
• フレックスフロー
• 正当化-コンテンツ
• 整列アイテム
• 整列コンテンツ

flex-directionプロパティ

• flex-directionプロパティは、主軸の方向（つまり、アイテムが配置される方向）を決定します。

.box {
    
    
  flex-direction: row | row-reverse | column | column-reverse;
}

この属性には4つの属性値があります

• 行（デフォルト）：主軸は水平で、開始点は左端です。
• 行反転：主軸は水平方向で、開始点は右端です。
• 列：主軸は垂直方向であり、開始点は上端にあります。
• column-reverse：主軸は垂直方向で、開始点は下端にあります。

フレックスラップ属性

• デフォルトでは、アイテムは線（「軸線」とも呼ばれます）に配置されます。flex-wrap属性は、軸線が収まらない場合の折り返し方法を定義しますか？

.box{
    
    
  flex-wrap: nowrap | wrap | wrap-reverse;
}

この属性には3つの属性値があります

• nowrap（デフォルト）：ラップしません。

• wrap：wrap、最初の行が一番上にあります。

• wrap-reverse：wrap、最初の行は下にあります

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

• flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティの短縮形であり、デフォルト値はrownowrapです。

.box {
    
    
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content属性

• justify-content属性は、主軸上のアイテムの配置を定義します。

.box {
    
    
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

この属性には5つの属性値があり、特定の配置は軸の方向に関連しています。以下は、主軸が左から右であることを前提としています。

• flex-start（デフォルト）：左寄せ
• フレックスエンド：右揃え
• 中央：中央
• space-between：両端で揃えられ、アイテム間のスペースは等しくなります。
• スペースアラウンド：各アイテムの両側のスペースは同じです。したがって、アイテム間の間隔は、アイテムと境界線の間の間隔の2倍になります。

align-items属性

• align-items属性は、アイテムが交差軸上でどのように整列されるかを定義します。

.box {
    
    
  align-items: flex-start | flex-end | center | baseline | stretch;
}

この属性には5つの属性値があります。特定の配置は、交差軸の方向に関連しています。以下は、交差軸が上から下であることを前提としています。

• flex-start：交差軸の開始点を揃えます。
• flex-end：交差軸の端点を揃えます。
• center：交差軸の中心点が整列します。
• ベースライン：プロジェクトのテキストの最初の行のベースライン配置。
• ストレッチ（デフォルト）：アイテムが高さに設定されていないか、自動に設定されていない場合、アイテムはコンテナ全体の高さを占めます。

align-content属性

• align-content属性は、複数の軸の配置を定義します。プロジェクトに軸が1つしかない場合、この属性は効果がありません。

.box {
    
    
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

この属性には6つの属性値があります

• flex-start：交差軸の開始点に合わせます。
• フレックスエンド：十字軸の端に揃えます。
• 中央：交差軸の中点に揃えます。
• 間隔：交差軸の両端に揃えると、軸間の間隔が均等に分散されます。
• スペースアラウンド：各軸の両側の間隔は同じです。したがって、軸間の間隔は、軸とフレーム間の間隔の2倍になります。
• ストレッチ（デフォルト）：軸は交差軸全体を占めます。

Flexプロジェクトのプロパティ

次の6つのプロパティがFlexプロジェクトに設定されています

• 注文
• フレックスグロー
• フレックスシュリンク
• フレックスベース
• フレックス
• 整列-自己

注文属性

• order属性は、アイテムの順序を定義します。値が小さいほど配置が大きくなり、デフォルトは0です。

.item {
    
    
  order: <integer>;
}

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

• flex-grow属性はアイテムのズーム率を定義し、デフォルトは0です。つまり、スペースが残っている場合、ズームは行われません。

.item {
    
    
  flex-grow: <number>; /* default 0 */
}

• すべてのアイテムのflex-growプロパティが1の場合、残りのスペース（存在する場合）を均等に分割します。
• 1つのアイテムのflex-growプロパティが2で、他のアイテムがすべて1の場合、前者が占める残りのスペースは、他のアイテムの2倍になります。

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

• flex-shrink属性はアイテムの縮小率を定義し、デフォルトは1です。つまり、スペースが不十分な場合、アイテムは縮小されます。

.item {
    
    
  flex-shrink: <number>; /* default 1 */
}

• すべてのアイテムのフレックスシュリンクプロパティが1の場合、スペースが不足すると、すべてのアイテムが比例して減少します。

• 1つのアイテムのflex-shrinkプロパティが0で、他のすべてのアイテムが1の場合、スペースが不足しているときに前者は縮小しません。

• この属性の負の値は無効です。

フレックスベースのプロパティ

• flex-basis属性は、追加のスペースを割り当てる前のプロジェクトのメインサイズを定義します。ブラウザは、この属性に基づいて、主軸に余分なスペースがあるかどうかを計算します。デフォルト値はautoで、これはプロジェクトの元のサイズです。

.item {
    
    
  flex-basis: <length> | auto; /* default auto */
}

• 幅または高さの属性と同じ値（350pxなど）に設定でき、アイテムは固定スペースを占有します。

フレックスプロパティ

• flexプロパティは、flex-grow、flex-shrink、およびflex-basisの省略形であり、デフォルト値は0 1autoです。最後の2つの属性はオプションです。

.item {
    
    
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

• この属性には、auto（1 1 auto）とnone（0 0 auto）の2つのショートカット値があります。
• ブラウザが関連する値を計算するため、3つの個別の属性を書き込むのではなく、最初にこの属性を使用することをお勧めします。

align-self属性

• align-self属性を使用すると、単一のアイテムを他のアイテムとは異なる配置にすることができ、align-items属性をオーバーライドできます。デフォルト値はautoです。これは、親要素のalign-items属性が継承されることを意味します。親要素がない場合は、stretchと同等です。

.item {
    
    
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• この属性は、autoを除いて6つの値を取ることができ、その他はalign-items属性とまったく同じです。