align-itemsは垂直方向の揃え揃えを指定できます。親要素の開始位置から配置。親要素の終点から配置。外側余白marginを指定item間の余白を50pxとります。(余白)となったため、50pxがそれぞれ溢れてしまっているため、カラム落ちします。スポンサーリンク-->calc関数で横幅指定ここでcalc関数が登場します。溢れないように33.333333%からmargin分の横幅を引きます。calcはパーセントでも固定値でも計算できるので便利です。50px);}カラム落ちはなくなりました。3つ目アイテムのmargin-right:50pxがあるため、右側に微妙に余白ができてしまいます。1つ目、3つ目とも両端に配置して、ちょうどよく等配分するには、3つ目は右余白を0にする必要があります。指定した個数目のアイテム余白を0に(nth-childで余白調整)3つ目itemの余白を0にする指定を入れます。nth-child()という擬似クラスで指定します。3つ目、6つ目両方の右側余白を0にしたいので、3の倍数で指定する3nを使います。次にitemの幅を余白も考えた幅に調整します。3つ並んだ場合、要素間の横の余白は50pxと50pxで合計100pxになります。この100pxを3つのitemに均等に分けるには、下記のような計算を使うことができます。3);}100pxの3分の1の幅を3等分の横幅33.333333%から引くと、marginで50px取ってもカラム落ちせず、均等に並べることができます。幅を縮めても、余白は50pxのままで他は均等にレスポンシブ化されます。スマホでは2列に変えてみる。余白も狭く設定変更スマホから見た場合には横2列に並べたい場合は、itemの幅と余白の計算、nth-child()の値が変わります。表示するメディアの横幅が689px以下の場合2列に表示する場合は下記のコードを加えます。余白を50pxから20pxに変更して要素内を少しでも大きく表示されるようにしてみます。2);}.item:nth-child(2n){margin-right:0;}.item:nth-child(3n){margin-right:20px;}.item:nth-child(6){margin-right:0;}}689px幅以下の場合は2の倍数の右余白を0にしたいので、nth-child(2n)と指定します。同時にPCの場合に指定していた3の倍数の右余白0を、もとに戻して20pxと指定しなおします。注意しなければならないのですが、2の倍数と3の倍数が重なる6つ目の要素には後から指定した3nの20pxの余白が適用されてしまい、カラム落ちしてしまいます。そのため、最後にnth-child(6)と数字を入力して余白0を指定しています。デモサイトはこちらです。まとめ横幅をcalc関数でパーセントを使って余白も計算して指定すると、どんな横幅に調整されても崩れません。今回は折り返し要素を指定しましたが、折り返さず一列にまとめればグローバルメニューにも利用できます。文字もalign-itemとjustify-contentで要素中央表示にできるので、設定が簡単ですよ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。検索:プロフィールこのサイトを運営しているユリです。WordPressのコードを書いています。詳しくはこちら他にコスメなどの情報をまとめた「ユリブログ2」も始めました。ご感想やご意見は、お気軽にお問い合わせフォームまでどうぞ。