ITコース CSS基礎 032_フレックスボックスレイアウト Flex

フレックスボックスレイアウト Flex

長い間、CSSレイアウトで信頼性があり、クロスブラウザ互換性のあるツールはfloatとpositionだけでした。これらの2つのツールはほとんどの場合うまく機能しますが、特定の面では制限があり、タスクを完了するのが困難になることがあります。

以下の簡単なレイアウト要件は、これらのツール（floatとposition）では便利かつ柔軟に実現することが困難または不可能です：

親コンテンツ内でブロックコンテンツを垂直方向に中央揃えする。
コンテナのすべての子要素が、利用可能な幅/高さに関係なく、等量の幅/高さを占めるようにする。
マルチカラムレイアウトのすべての列が、含まれるコンテンツの量が異なっていても同じ高さを採用するようにする。

例の効果

CSSのFlexレイアウトは、CSSの強力なレイアウトツールで、様々な柔軟なレイアウトを作成するために使用できます。CSSのFlexレイアウトを習得するには、以下の知識ポイントを理解する必要があります：

Flexコンテナ (flex container)：FlexレイアウトはFlexコンテナとFlexアイテムで構成されます。FlexコンテナはFlexアイテムをFlexレイアウトに配置するコンテナです。Flexコンテナは任意の要素にできますが、通常はdiv要素が使用されます。
Flexアイテム (flex item)：FlexアイテムはFlexコンテナに配置される要素です。Flexアイテムは任意の要素にできますが、通常はdiv要素が使用されます。
主軸 (main axis)：主軸はFlexレイアウトにおける要素の水平または垂直方向です。
交差軸 (cross axis)：交差軸はFlexレイアウトにおける要素の垂直または水平方向です。

Flexコンテナプロパティ

Flexコンテナには、Flexレイアウトを制御するための以下のプロパティがあります：

display: Flexコンテナの表示モードを設定します。Flexコンテナはdisplay: flexまたはdisplay: inline-flexに設定する必要があります。
flex-direction: Flexレイアウトの主軸方向を設定します。値はflex-start主軸開始位置揃え、flex-end主軸終了位置揃え、row主軸水平配置、row-reverse主軸逆水平配置、column主軸垂直配置、column-reverse主軸逆垂直配置にできます。
flex-wrap： Flexコンテナ内のアイテムが折り返すかどうかを制御します。nowrapデフォルト値、折り返しなし、wrap折り返し、wrap-reverse逆方向折り返し。
flex-flow：flex-directionとflex-wrapの省略形で、2つの値はそれぞれflex-directionとflex-wrapに対応します。
justify-content: Flexコンテナ内のFlexアイテムの主軸上の配置を設定します。値はflex-start主軸開始位置揃え、flex-end主軸終了位置揃え、center主軸中央揃え、space-between主軸均等配置（コンテナ端揃え）、space-around主軸均等配置（アイテム間隔均等）、またはspace-evenly主軸均等配置（両端の間隔も均等）にできます。
align-items: Flexコンテナ内のFlexアイテムの交差軸上の配置を設定します。値はflex-start交差軸開始位置揃え、flex-end交差軸終了位置揃え、center交差軸中央揃え、stretchデフォルト値、またはbaseline交差軸1行目テキストベースライン揃えにできます。Flexコンテナの子アイテムにのみ作用します。
align-content：align-itemsと同様に、交差軸上の子アイテムの配置を制御するプロパティで、Flexコンテナに複数の軸線がある場合（複数行または複数列の場合）にのみ有効です。

Flexアイテムプロパティ

Flexアイテムには、Flexレイアウト内でのレイアウトを制御するための以下のプロパティがあります：

flex-grow: Flexアイテムの主軸上の伸長比率を設定します。値は0から1の間の浮動小数点数にできます。
flex-shrink: Flexアイテムの主軸上の縮小比率を設定します。値は0から1の間の浮動小数点数にできます。
flex-basis: Flexアイテムの主軸上のデフォルト幅または高さを設定します。値は長さ値、パーセンテージ値、またはautoにできます。
order: Flexアイテムの主軸上の順序を設定します。値は1から65535の間の整数にできます。

例：

1
/* Flexコンテナスタイル */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* 主軸方向は水平 */
5
    justify-content: space-around; /* 主軸上の配置 */
6
    align-items: center; /* 交差軸上の配置 */
7
    height: 200px; /* コンテナの高さを設定 */
8
    border: 2px solid #333; /* 視覚化のためにボーダーを追加 */
9
}
10
/* Flexアイテムスタイル */
11
.flex-item {
12
    flex: 1; /* 主軸空間を均等分配 */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Flexコンテナ -->
2
<div class="flex-container">
3
    <!-- Flexアイテム1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Flexアイテム2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Flexアイテム3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

効果：

例の効果

フレックスボックスレイアウト Flex

コメント