space-between」は自動でマージンも計算してくれるため非常に使い勝手が良く、インフォメーションをグリッドレイアウト風に並べる時など、ついつい多用してしまいます。space-between」では最初と最後のアイテムは端に、残りは等間隔で配置されますので、隙間が大きくなり見た目がよろしくありません。#60B99A;}RESULTBox01Box02Box03Box04Box05Box06上の結果の通り、Box05とBox06の間に大きな隙間が出来てしまいました。flex-start」で並べると左揃えにはなりますが、マージンを空かすために「margin-right」等を指定する事になるので、左右どちらかの端にマージン分の隙間が出来てしまいます。Box01Box02Box03Box04Box05Box06これを解決するために、無理やり見えない要素を最後尾に足したり、Javascriptで制御する方法もあるのですが、あまりスマートではありません。できればCSSのみでなんとかしたい所。そこで役立つのが、要素の最後尾にスタイルを指定できる「last-child」疑似クラスと、何個目かの要素にスタイルを指定できる「nth-child」疑似クラスの合わせ技です。1);}RESULTBox01Box02Box03Box04Box05Box06疑似クラス「:nth-child(4n+2):last-child」の部分を説明すると、2つ目の要素から始まって、4個ずつ飛ばして選択した要素が最後の要素ならば、右に空白分のマージンを空けるように指定しています。(4n+2)の2の部分は疑似クラスを使って調べる"位置"になりますので、並べたい個数によって増減させて下さい。調べる位置とマージンの方向を変えれば右揃えも可能です。左端を表す「:nth-child(4n+1):last-child」と右端の要素への適用は不要です。汎用性を高めるために「margin-right」の数値指定にcalcを使っていますが、ここにはあらかじめ計算した数値を記入しても問題ありません。"マージンの個数"は単に"一行に並べたい個数"から1引いた数になります。他にも「margin-right」にautoを指定して「margin-left」にマージンの幅を入れる方法でも対応可能です。Box01Box02Box03Box04Box05Box06Box07このように行が増えても問題ありません。flex-start」の端の要素から余分なmarginを消し去る処理を行っても良いと思いますが、逆にあらかじめ全体を計算しておく必要があるので面倒でした。新着情報ITコラムWEB制作その。