フレックスレイアウトの justify-content: space-between 配置のバグを解決する 2 つの方法の詳細な説明

display:flex、justify-content: space-betweend を設定すると、子要素が両側に揃えられ、残りのスペースが均等に分割されます。

例えば、1行に3つの子要素を配置したい場合

効果：

これは問題ないように見えますし、見栄えも良いのですが、次の行に 3 つの文字がない場合、2 つしかない場合は問題が発生します。

これは、中央に大きな空白があり、特に見苦しいです。前の行と 1 つずつ揃えるという望ましい効果ではなく、特にバグのように見えます。

この問題を解決するには、次の 2 つの方法があります。

• 疑似クラス: after
• プレースホルダー要素を提供する

擬似クラスソリューション

プレースホルダー要素のソリューション

効果

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。