高さが異なるフレックスボックスの子で利用可能なスペースを均等に分配するにはどうすればよいですか?

高さが異なるフレックスボックスの子の利用可能なスペースを埋める

問題:

2 つ- 列フレックスボックス レイアウト。身長が異なる子供たちは、最も背の高い子供の高さに揃えられる傾向があります。 子供。コンテンツに関係なく、利用可能なスペースを子間で均等に分配するにはどうすればよいですか?

解決策:

デフォルトでは、フレックスボックス行は垂直方向に引き伸ばすことにより、子間でスペースを均等に分配します。 。これを防ぎ、子がコンテンツに基づいてスペースを占有できるようにするには、align-items プロパティを flex-start:

に設定します。説明:

align-items: flex-start を設定すると、子がコンテナの上端に整列され、子が独自のコンテンツに基づいて利用可能なスペースを垂直方向に埋めることができるようになります。このように、各子は、行内の最も背の高い子の高さに一致させるのではなく、その内容に比例したスペースを占有します。

注:

次の点に注意することが重要です。 flex-start は、行内の子の垂直方向の配置にのみ影響します。 flex-wrap プロパティは、利用可能なスペースに合わせて必要に応じて行をラップし続けます。

以上が高さが異なるフレックスボックスの子で利用可能なスペースを均等に分配するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。