CSSを使う場合、以下のコードで要素を横並びさせることが可能でした。

【HTML】

【CSS】

このコードの問題点は、

  • 枠線を設定した場合、その枠線の幅を計算して 内部要素の幅(.in)を設定する必要がある
  • 枠線幅をキチンと計算しても、ブラウザ毎に枠線の幅の扱いが異なる為、思ったように表示されないことがある
  • floatを設定した場合、 clearfix のおまじないを設定しないと、枠要素で設定した背景が表示されないなど、不具合が生じる場合がある
  • 内部要素の高さが揃わない

というところにありました。

【このコードでの表示】

 

無理矢理高さを揃えるには、

【CSS】

と、ハイライトした行を追加すれば可能でした。

【このコードでの表示】

しかし、例えば「う」の行を加筆したりすれば、たちまち、高さが揃わなくなります。

 

CSS3のdisplay:flex; が便利

このまどろっこしさを解消する設定項目として、CSS3には「display:flex;」が登場しました。古いバージョンのブラウザを切り捨てて構わないのなら非常に便利です。

【CSS】

 .in に width:20%; を設定しているのは、要素が5個ある為です。6個などの場合でも17%以上にすれば、自動的に幅が揃います。

 

ご覧の通り、要素の高さも幅も揃っています。

2列にする場合

では、要素を2列ずつ表示するにはどうしたら良いでしょうか?この設定も非常に簡単で、2行追加するだけで可能です。

【CSS】

設定項目の意味は以下の通りです。

flex-wrap:wrap; → 複数行での表示を許可
width:50%; → 内部要素の幅を50%に変更
box-sizing: border-box; → 50%の幅の中に、padding、borderの幅を含む

 

ご覧の通り、幅も高さも整っています。

 

もし、この記事の意味が今一分からない場合でも、要素が綺麗に揃わないという場合には、現在の枠要素へ、

を追加してやるだけで解決する場合があります。一度お試し下さい。

スポンサー

お問い合わせ

この記事についてご質問があれば、お問い合わせ下さい。

お名前(必須)
お名前フリガナ(必須)
メールアドレス(必須)
メールアドレス確認(必須)
お問い合わせ記事URL
お問い合わせ内容(必須)