HTML/CSSレクタングル大TweetPocket要素を等間隔で横並びにすることってWEBコーディングで絶対に出てきますよね。横並びの方法はfloat・inline-block・tableなど色々ありますが、レスポンシブ対応も必須な今はとにかくdisplay:flexが便利です。calc関数を使って余白を計算してパーセント指定すると、横幅を変動してもレイアウト崩れが起きません。nth-childで改行手前の要素の余白を消す処理をすれば、横並びが繰り返されても崩れません。カンタン!長い間floatで苦労してきたけど、素敵な時代が来たなあ・・と思うこの頃です。指定した個数目のアイテム余白を0に他の余白も調整スマホでは横2列設定に変えてみるまとめdisplay:flexで横並び指定デモサイト作成しましたので、まずはご覧ください。写真とテキストが入ったアイテムが横に3列並んでいる下記の状態をdisplay:flexでコーディングしてみます。要素が6つ、PCで横並び3列、スマホで横並び2列になるように指定してみます。要素6つをdivで囲います。--></div>item要素には猫の写真とテキストがあります。このitem要素6つをitemsで囲みました。このitemを横並びにするには、囲ったitemsにflex指定をします。33.33333333%;}親要素itemsにflex指定、flex-wrapで子要素の折り返しを指定しています。itemでは今の時点では内側の余白を指定して、PCで3列表示として33.33333333%とパーセント指定しました。flex-wrapにはほかに下記の指定が可能です。・・・子要素を折り返さず一行に並べる・flex-wrap:wrap-reverse・・・子要素を折り返し、複数行に下から上へ並べるjustify-contentは水平方向の揃えを指定できます。行の開始位置から配置。