CSS Flexbox の具体的な使用例の詳細-CSSチュートリアル-php.cn

Flexbox は強力で柔軟なレイアウトです。この記事では、CSS Flexbox の具体的な使用法に関する関連情報を主に紹介します。編集者が非常に優れていると思うので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. Flexbox の概要

Flexbox レイアウト (フレキシブルボックス) モジュールは、サイズが不明または動的であっても、コンテナ内の項目のレイアウトを作成、調整、配布するためのより効率的な方法を提供するように設計されています。簡単に理解すると、コンテナ空間内の要素のサイズを自動的に調整、計算し、効果的かつ合理的なレイアウトを実行できるということです。

Flexbox レイアウトには、Flex コンテナーと Flex プロジェクトという 2 つの重要な概念があります。

Flex コンテナには複数の Flex プロジェクトが含まれており、Flex コンテナと Flex プロジェクトの特定のプロパティを設定することで、さまざまな柔軟なレイアウトスタイルを実現できます。

Flexboxの使用

Flexboxの使用は非常に簡単で、Flexコンテナにdisplay:flexまたはdisplay:inline-flexを設定するだけで、Flexboxレイアウトを使用することができます。

以下は具体的な例です:

htmlコード

<p class="container">
        <p class="wrap">
            <p></p>
            <p></p>
            <p></p>
        </p>
    </p>

ログイン後にコピー

cssコード

.container {
    width: 70%;
    height: 500px;
    margin:20px auto;
    border: 1px solid black;
}
.container .wrap {
    display: flex;
    border: 3px solid #a448cf;
    margin:20px;
    width:80%;
    height:80%  
}
.container .wrap p {
    width:150px;
    height:150px;
    background-color: #c75a5a;
    margin:10px;
}

ログイン後にコピー

2. Flexコンテナ

まずFlexコンテナの具体的なプロパティと具体的な使い方を紹介します。。

プロパティ値意味row || 列反転 || 列反転主軸の配置方向に沿ってフレックス項目を制御しますwrap || Wrap-reverse flex-direction と flex-wrap の 2 つのプロパティの組み合わせ flex-start || space-before Main-Axis での Flex アイテムの配置 flex-start || flex-end || ベースライン Cross-Axis での Flex アイテムの配置を制御します align-contentflex-start || flex-end || center || 複数行の Flex コンテナでクロス軸の Flex アイテムの配置を制御するために使用されます

Flex アイテムをラップして表示するかどうかを制御します

行のラップ || 行のラップ ||

1. flex-direction

flex-direction プロパティは、行 (水平)、列 (垂直)、または行と列の逆の、主軸 (Main Axis) に沿った Flex アイテムの配置方向を制御します。。

デフォルトでは、flex-directionの属性値はrowであり、具体的な配置は次のとおりです:

しかし、flex-directionの属性値がcolumnの場合、対応する主軸は垂直下向きである必要があります。

具体的なアプリケーション例は次のとおりです:

2. flex-wrap

flex-wrap 属性は、Flex アイテムをラップするかどうかを制御します。デフォルトでは、Flex コンテナにはすべての Flex アイテムが 1 行に含まれます。これは、flex-wrap プロパティのデフォルト値が nowrap (行の折り返しがないことを意味する) であるためです。

具体的な適用例は次のとおりです:

ここで、wrap-reverse は、Flex アイテムがコンテナ内で複数の行に配置されますが、方向が逆になることを意味します。

3. flex-flow

flex-flow は、flex-direction と flex-wrap の 2 つのプロパティの短縮形プロパティです。

これ以上詳しい説明はありません。次の例を見てください:

4. justify-content

justify-content 属性は、メイン軸全体での Flex プロジェクトの配置を制御します。

justify-content のデフォルトの属性値は flex-start です。

space-between は、フレックス項目の両端を揃えます。

space-around は、各 flex アイテムに同じスペースを与えます

5. align-items

align-items は、Flex アイテムの交差軸の配置を制御します。

align-items のデフォルト値はストレッチで、すべての Flex アイテムが Flex コンテナと同じ高さになり、広がります。

ベースライン

すべてのフレックス項目を交差軸上の独自のベースラインに沿って整列させることができます。

ストレッチとベースラインは、特定の高さの値が設定されていない限り上記のように動作します。それ以外の場合は、固定の高さが表示されます。

align-content 属性は align-items と同じ効果がありますが、この属性は複数行にのみ適用され、単一行には無効です。

3. Flexプロジェクト

続いて、Flexプロジェクトの具体的なプロパティと使い方を紹介していきます。

auto || flex-start || センターストレッチ

1. order

order を使用すると、Flex コンテナー内で Flex アイテムを並べ替えることができます。このプロパティのデフォルト値は 0 です。

注文金額のサイズに応じて、低いものから高いものまで並べ替えます。

デフォルトでは、並べ替えは次のようになります:

ブロック 1 が order:1 に設定されている場合、並べ替えは次のようになります:

複数の Flex アイテムが同じ順序値を持つ場合、Flex アイテムはHTML ソースファイルの場所に基づいて並べ替えられます。

以下に示すように、ブロック 1 とブロック 2 の両方を order:1 に設定します。

2. flex-grow と flex-shrink

flex-grow プロパティと flex-shrink プロパティは、コンテナ内に余分なスペースがある場合に Flex アイテムがどのように拡張 (拡張) されるか、およびコンテナ内に余分なスペースがある場合にどのように縮小されるかを制御します。余分なスペースはありません。

flex-grow と flex-shrink の値は、0 または 0 より大きい任意の正の数にすることができます。

デフォルトでは、flex-grow プロパティ値は 0 に設定されています。これは、Flex アイテムが Flex コンテナの利用可能なスペースを満たすまで拡大しないことを意味します。

デフォルトでは、flex-shrink 属性値は 1 に設定されています。これは、Flex アイテムが画面の幅に合わせて縮小することを意味します。

以下に示すように、flex-grow の値を 1 に設定すると:

複数の flex 項目が 1 行にある場合、つまり折り返しなしの場合は、対応する flex-grow と flex-shrink の値を異なる値に設定します。スペースの配分も違います。

flex-grow

各アイテムのすべての拡張設定を合計して利用可能なスペースを取得し、それを合計拡張値で割ってユニットに割り当てられたスペースを取得します。

各項目の拡張設定に基づいて計算され、項目の拡張が 6 の場合、主軸上の項目のサイズは 6 * 割り当てられた領域のサイズだけ拡張する必要があります。

flex-shrink

まず、flex-shrink * item-size に従ってすべてのアイテムを合計して加重合計を取得し、次に各アイテムの縮小率を計算します: 縮小率 = flex-shrink * item-size / 前回の合計。最後に、各アイテムは縮小率 * 負の利用可能なスペースから減算されます。

フレックスアイテムにmin-width(height)とmax-width(height)がある場合、対応するアイテムは上限値と下限値を考慮し、残りのストレッチ値を他のアイテムに割り当てる必要があります。

3. flex-basis

flex-basis は、フレックス要素の主軸方向の初期サイズを指定します。これにより、フレックス項目コンテンツの幅または高さ (主軸の方向に応じて) が決まります。

デフォルトでは、Flex アイテムの初期幅は flex-basis のデフォルト値、つまり flex-basis: auto によって決まります。フレックス項目の幅は、コンテンツの量に基づいて自動的に計算されます。

flex-basis と width/height には特定の優先順位があります。具体的なルールは次のとおりです:

flex-basis は width/height 非自動よりも高い優先順位を持ちます
width/height auto は同じ優先順位を持ちます。 flex-basis にするには、2 つの最大値を取ります。

4. align-self

align-self は、交差軸に沿った個々の項目の配置を制御します。

auto に加えて、上記の例のフレックスコンテナーは align-itmes: center を設定します。

auto は、ターゲットのフレックス項目の値を親要素の align-items 値に設定するか、要素に親要素がない場合はストレッチします。上の例では、align-items:stretch を実行します。