1. ホーム
  2. HTML/CSS
  3. flexboxで要素を均等幅で横並びに配置する

flexboxで要素を均等幅で横並びに配置する

flexboxは要素を横並びにするのに便利なプロパティですが、デフォルトでは要素の各幅が均等にならない場合があります。

その場合のプロパティの指定方法をよく忘れのでメモしておきます。

スポンサーリンク

子要素にflex:1を指定する

見出しのまんま、flex:1と指定すればOKです。

例えば、下記のようなコードがあるとした場合、

単純に次のようにCSSを指定すると幅がバラバラになります。

短いテキスト
少し長めのテキスト
と〜〜〜ても長〜いテキスト

 

そこで各要素のflex:1を指定します。

短いテキスト
少し長めのテキスト
と〜〜〜ても長〜いテキスト

 

これで均等になりましたね。

スポンサーリンク

コメント

この記事へのコメントはありません。

コメントをどうぞ

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)