H5 フレキシブル ボックス レイアウトの使用方法の詳細な紹介 (親コンテナーのプロパティ)

display: flex/inline-flex を親コンテナに追加します

親コンテナで使用できる属性は次のとおりです:

1.flex-direction: 主軸の方向を決定します

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

行 (デフォルト値): 主軸は水平であり、開始点は左端にあります。

row-reverse: 主軸は水平であり、開始点は右端にあります。

列: 主軸は垂直であり、始点は上端にあります。

column-reverse: 主軸は垂直であり、開始点は下端にあります。

2.flex-wrap: 1つの軸を配置できない場合にそれをラップする方法。

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

nowrap (デフォルト): 行の折り返しなし。親コンテナーの幅が十分でない場合、各項目は適切に圧縮されます。

wrap: 行の折り返し。最初の行は親コンテナの先頭にあります。

wrap-reverse: ラップ、最初の行は親コンテナーの下部にあります。

3.flex-flow: この属性は、flex-direction 属性と flex-wrap 属性の省略形です。デフォルト値は row nowrap です。

4.justify-content: 主軸上の項目の配置を定義します。

には次の属性値があります:

flex-start (デフォルト値): 左揃え

flex-end: 右揃え

center: 中央揃え

space-between:両端に揃えると、項目間の間隔はすべて等しくなります。 (最初と最後の項目は、それぞれ項目の左端または右端にあります)

space-around: 各項目の両側のスペースは等しいです。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。 (最初と最後の項目は親コンテナの両側から間隔をあけて配置されます)

5.⑤ align-items: 交差軸上で項目をどのように配置するかを定義します

には次の属性値があります

flex- start: 交差軸の開始点を揃えます。

flex-end: 交差軸の終点を揃えます。

center: 交差軸の中点を揃えます。

baseline: アイテムのテキストの最初の行のベースライン配置。 (行の高さ、フォント サイズなどが各行のベースラインに影響します)

stretch (デフォルト値): 子コンテナに高さが設定されていない場合、または自動に設定されている場合、子コンテナはコンテナの高さ全体を占めます。親コンテナ。

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

には以下の属性値があります

flex-start: 交差軸の開始点に位置合わせされます。

flex-end: 交差軸の終点に位置合わせされます。

center: 交差軸の中点に位置合わせされます。

間隔: 交差軸の両端に合わせて、軸間の間隔が均等になります。

space-around: 各軸の両側のスペースは等しいです。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。

ストレッチ (デフォルト値): 軸は交差軸全体を占めます。

以上がH5 フレキシブル ボックス レイアウトの使用方法の詳細な紹介 (親コンテナーのプロパティ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。