JavaScript

Flexボックスで中央左寄せにする方法 JavaScriptを使用

対象コード

CSS

HTML

JavaScript

動作確認

Image from Gyazo

何をしているのかというと、高さや余白が 0 の空の子要素を実際の子要素数だけ追加しています。

そのようにすることで、親要素の幅に依存せず中央左寄せに表示されるわけですね。

今回はJavaScriptを使用しての実装となりましたが、願わくばCSSのみで実装したいところです。

 

参考にさせていただいたサイト様

 

Pocket