justify-content:space-betweenで最後の列までキレイに要素を並べる方法。NESLANESLANESLAWEBjustify-content:space-betweenで最後の列までキレイに要素を並べる方法。無理だった話2019.09.22justify-content:space-betweenで最後の列までキレイに要素を並べる方法。使わずに要素をキレイに横ならべしたかったんです。全ての列で要素の数が同じじゃないと、キレイに横並びしないんです。結局どっちの方法を使った方が良いのかjustify-content:space-betweenを使って要素の横ならべをしてみる横に4つの要素並べて、7つの要素しかないとこんな感じになっちゃう。CodePen.8つの要素があればちゃんとキレイに並ぶんで、要素の数が固定の場合であれば超便利なんだけど、要素の数が可変の場合は使えたもんじゃない。ならないかとWEBの海をサーフィンしていると、JavaScriptを使えば解決できるよとの記事を発見しました。全体を中央に配置しつつ最後の行を左揃えにするただ内容が、『全ての列の要素の数が同じじゃないなら、空の要素を追加して要素の数を合わせちゃえばいいじゃない!』といったマリーアントワネット的な内容でした。無駄な要素を増やす事はHTMLが汚くなるので、却下です。marginを使った要素の横ならべやり方はいくらでもあると思いますが、2つほど紹介したいと思います。とって、:nth-child(Xn)を使ってmargin:0;を端だけに付ける2種類ともこのHTMLで組んでいます。<p>分かりやすく、上位要素の背景に色を付けています。使い方は、Xの倍数の要素に対してcssをかけることができます。margin-right:0;}結局どっちの方法を使った方が良いのか2種類紹介しましたが、オススメはマイナスmarginを付ける方法です。横に並ぶ要素の数が固定の場合だったらどっちでもいいんですが、リキッドデザインを組むとなるとウインドウのサイズによって横幅が変わるので、要素の数も変わっちゃうからです。使えないので、マイナスmarginで組むのに慣れていた方が良さそうな気がするからです。以上!PS.もっと簡単な方法知ってるよ!という方がいらっしゃいましたら、是非教えてください。inventoryが出た時の対処法2019.10.26MTGアリーナ【ラグマス】NGワード一覧2019.10.15ラグマス【ラグマス】クリエイターの装備考察2019.10.14ラグマスだから僕はラグナロクオンラインを辞めた。2019.10.09ブログ【ラグマス】ガチャで見るガンホーの頭の悪さ2019.10.07ラグマス【ラグマス】ギルドに入る8つの理由2019.10.06ラグマススポンサードリンクプロフィールヨッシーゲーム・アニメ好きなWEBデザイナー。ブログの方向性はありません。今気になった事を適当に記事にしています。