FlexBoxの使い方（２）〜整列の方法とfloatレイアウトとの違い

FlexBoxを使った整列の方法とfloatとの違いを解説します。

floatレイアウトとFlexBoxレイアウトの違い
flexレイアウトでよく使うプロパティ
1. 横並びflexアイテムの水平方向の位置調整
2. 横フローの場合垂直方向の整列〜align-items
Flex Boxレイアウト関連記事

floatレイアウトとFlexBoxレイアウトの違い

flexレイアウトの例・・・・自動で高さが揃う

floatレイアウトの例・・・・高さを揃えることができない

floatレイアウトとflexレイアウトのCSSコード

flexレイアウトのCSS

.column{
  padding: 10px;
  border:1px solid #333;
  margin-right: 20px;
}
.column:last-child{
  margin-right:0;
}
.content{
  display:flex;
  width:100%;
  margin: auto;
}

floatレイアウトのCSS

.column{
  box-sizing: border-box;
  float:left;
  width:calc(33.3333% - 20px);
  padding: 10px;
  border:1px solid #333;
  margin-bottom: 50px;
  margin-right: 10px;
}
.column:last-child{
   margin-right: 0;
}
.content{
   width:100%;
   margin: auto;
   overflow: hidden;
}

floatレイアウトの問題点

横並びのレイアウトを作成するとき、これまでの多くの場合floatレイアウトを使用していました。けれどもfloatレイアウトは面倒な手続きが必要でした。floatレイアウトのように面倒な計算が多いことは、カスタマイズにも弱く。下手をするとカラム落ちなどデザインの崩壊につながりかねません。

floatレイアウトでは各カラムにfloatの指定
- 各カラムの幅を計算して決める必要がある
- リキッドタイプの場合はパーセント単位で面倒な計算する必要がある
- ボーダーなど固定サイズのものを考慮するには、box-sizing: border-boxでボックスモデルの考え方を変更する必要もある
floatはどこかでクリアをしないと後続のレイアウトに影響してしまう問題がある
floatをした子要素を抱える親要素を正しく子要素のサイズを認識できずに囲めない問題もある
floatの場合各カラムの高さが揃わない問題がある
floatの場合カラムの順番を思い通りに入れ替えることができない

flexレイアウトでできる主なこと

縦方向レイアウトと横方向レイアウトができる
カラムの幅を決めなくても自動で横レイアウトができる
カラムの幅を決めて横レイアウトができる
カラムの順番の入れ替えを自由にできる
水平方向、垂直方向の細かい揃えができる

flexレイアウトでよく使うプロパティ

横並びflexアイテムの水平方向の位置調整

flexアイテムの水平方向の位置揃えはflexコンテナに対して「justify-content」プロパティを使用します。

プロパティの名前 justify-content

値 flex-start | flex-end | center | space-between | space-around
初期値 flex-start
適用対象 flex コンテナ
継承されない
媒体 visual
算出値指定値

flex-start: flexアイテムはラインの開始点に向けて収まります。通常の横並びの場合は、左寄せになります。
flex-end: flexアイテムはラインの終端に向けて収納されます。通常の横並びの場合は、右寄せになります。
center: flexアイテムはラインの中央に向けて収納されます。通常の横並びの場合は、中央寄せになります。
space-between: flexアイテムはライン内に均等に分布されます。
space-around: flexアイテムは、両端には半分サイズの空間を伴う様に、ライン内に均等に分布されます。

横フローの場合垂直方向の整列〜align-items

flexアイテムの垂直方向の位置揃えはflexコンテナに対して「align-items」プロパティを使用します。

プロパティの名前 align-items

値 flex-start | flex-end | center | baseline | stretch
初期値 stretch
適用対象 flex コンテナ
継承されない
媒体 visual
算出値指定値

flex-start: flexアイテムは上端揃えになります。
flex-end: flexアイテムは下端揃えになります。
center: flexアイテムは垂直方向の中央揃えになります。
baseline: それぞれのflexアイテムは1行目のベースラインで一番下に位置するflexアイテムのベースラインに揃えられます。
stretch: flexアイテムは全ての高さが揃うように伸張されます。もし、 min-height ／ min-width ／ max-height ／ max-width の指定がある場合はその値が優先されます。

DogRoboの住む世界は仮想空間なのだから、物理の法則も好きに作ればよいことになる。幸いW3Cなる機関が全国のロボットの住人に許可を得ながらそれらしい物理の法則を作ってくれる。利権がらみの論争も多くってね、正直すこし待ち遠しいこともある。
そんなドロドロした世界はロボット社会も人間社会と同じだ。正直なところ馬鹿馬鹿しいよ。