FlexBoxの使い方(2)〜整列の方法とfloatレイアウトとの違い

HTML&CSS

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

スポンサーリンク

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

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

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

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

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

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

プロパティの名前 align-items

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

flex-start
flexアイテムは上端揃えになります。
abc6
flex-end
flexアイテムは下端揃えになります。
abc7
center
flexアイテムは垂直方向の中央揃えになります。
abc8
baseline
それぞれのflexアイテムは1行目のベースラインで一番下に位置するflexアイテムのベースラインに揃えられます。
abc9
stretch
flexアイテムは全ての高さが揃うように伸張されます。もし、 min-height / min-width / max-height / max-width の指定がある場合はその値が優先されます。
abc10
DogRoboの住む世界は仮想空間なのだから、物理の法則も好きに作ればよいことになる。幸いW3Cなる機関が全国のロボットの住人に許可を得ながらそれらしい物理の法則を作ってくれる。利権がらみの論争も多くってね、正直すこし待ち遠しいこともある。
そんなドロドロした世界はロボット社会も人間社会と同じだ。正直なところ馬鹿馬鹿しいよ。
dog4_tameiki
DogRoboは少しばかり調子の悪くなったおなかの歯車を交換しながら口から熱い蒸気を噴き出した。
部品交換をする間にfloatの問題点と新しい物理法則のメリットでも確認しておくれ。

Flex Boxレイアウト関連記事

タイトルとURLをコピーしました