CSS

2017/06/11

ボックス（矩形）を横に並べるためのHTMLとCSSです。

条件的には

• レスポンシブ対応（横スクロールが出ない）
• ボックスの数は後々増えたり減ったりする可能性がある。
• 広い幅ではボックス4個で1列5個目以降は2行目になり以降4個で1行（中間幅では2個1行、最小幅では1行1個）にする。
• ボックスは左揃えにしておく

一般的にあるパターンですね。完成パターンです。ブラウザ幅に応じてボックスの幅が変わって常に4つで幅いっぱいに収まっています。狭くすると2つ、もっと狭くすると1つになります。

のようにしたいのですが高さを出すのがちょいむずです。TABLE要素を使う手もありかもしれませんが、必要以上にtable要素は嫌われている感じですので他の方法を使います。犬画像エントリー一覧表というタイトルにすれば表なのでいいとは思うのですがね。

HTML

<div class="flex-box">
  <div>
    <div class="box">
      <p>エントリーナンバー1</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー2</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー3</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー4</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー5</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー6</p>
    </div>
  </div>
</div>

ちょっと階層が深いですが全体をflex-boxクラスで囲みます。そしてdiv要素の中に装飾用のdiv要素を入れたものを用意します。

CSS

.flex-box{
  display:flex;
  flex-wrap: wrap;
}
.flex-box div{
  box-sizing: border-box;
  flex-basis: 100%;
  padding:10px;
}
.box{
  width:100%;
  height:100%;
  border:2px solid #ccc;
  border-radius:3px;
}

flexboxといわれるものを使います。

displya:flexを指定された直接の子要素はflexアイテムとして整列されて並びます。flexboxはいろいろとプロパティーがあり詳細に設定が可能ですが、必要な物だけ設定し説明します。

まず親要素でdisplya:flexを設定するとで直接の子要素は何らかの法則で整列されます。次にflex-wrap:wrapとすることで子要素の合計の幅が親要素より大きくなった時に折り返すように設定します。つまり次の段（行）に子要素であるdiv要素が落ちるということですね。

子要素である.flex-box divに対してはflex-basis: 100%;を指定します。これはスマホ表示の時のことです。親要素の幅と同じという意味ですので1個のdiv要素で満タンになってしまいますのでflex-boxのすべての直接の子要素であるdiv要素は１つずつ縦に並びます。

あとは内側のboxクラスを10pxずつ内側に配置するためpadding:10pxを設定しているのですが、基本ボックスの幅（高さ）はwidthプラスpaddingプラスborderプラスmarginなので幅が100%をこえてしまいます。　calc()を使うかbox-sizing: border-boxでボーダー領域までをwidthの中に含めてしまいます。

子要素である.flex-box divの幅の指定はflex-basisで行います。通常のwidthでは思った通りにならない場合があります。

HTML

@media(min-width:481px){
	.flex-box div{
		flex-basis: 50%;
	}
}
@media(min-width:769px){
	.flex-box div{
		flex-basis: 25%;
	}
}

スマホファーストなのでタブレットサイズまではflex-basis: 50%として2個横に並ぶようにします。タブレットサイズより大きい場合はflex-basis: 25%として4個横に並ぶようにしてあります。

高さについてはalign-content: stretchが初期値として設定されているようですので同じ行（段）のものは同じ高さになります。

この仕組みをうまく使えばサイト全体のレスポンシブ対応も簡単に作れるような気がします。昔はJavaScriptで一番高い高さのボックスを調べてその高さに合わせたりしたものでしたが、とても短く書くことができるようになりました。