display:flexを使えばレイアウトは思いのまま
『display:flex』を使うとグローバルナビを横並びにしたり２カラム３カラム構成などブロック要素を横並びに配置する事ができます。
今まではfloatプロパティを使うのが一般的でしたが、これだとブロック要素が浮いてしまい<hr>や空のdiv要素などを配置し「both:clear」を指定する必要がありました。
これでも結果的には問題ありませんが、htmlのコードが煩雑になったりboth:clearの指定忘れでレイアウトが崩れたり、横並びのheightを同じ値に指定しないといけないなど様々な問題がありました。
display:flexを使うことでheight値が同じになるように自動で調整されたり、上下の中央配置・両端揃いなどもわずかなCSSコードを記述するだけで可能となります。
まずは親要素にdisplay:flexを指定
親要素にdisplay:flexを指定することでその直下にある子要素を横並びにすることが出来ます。
左揃い・中央揃い・右揃い・両端揃い・均等揃いの設定
justify-contentで横の並び位置や間隔設定が可能です
- justify-content:flex-start; /*左揃い*/
- justify-content:center; /*中央揃い*/
- justify-content:flex-end; /*右揃い*/
- justify-content:space-between; /*両端揃い*/
- justify-content:space-around; /*均等揃い*/
width指定無視の１行表示or折り返し表示
flex-wrapで１行表示or折り返し表示
- flex-wrap:nowrap; /*１行表示
- flex-wrap:wrap; /*折り返し表示
縦の中央揃い・上揃い・下揃い・縦100%表示
align-itemsで縦の並び位置を設定
- align-items: flex-start; /*上揃い*/
- align-items:flex-end; /*下揃い*/
- align-items:center; /*縦の中央揃い*/
- align-items:stretch; /*縦100%表示*/
個別に縦の中央揃い・上揃い・下揃い
display:flexを指定した子要素にalign-selfを指定することで個別に縦の並び位置を設定
- align-self:flex-start; /*上揃い*/
- align-self:flex-end; /*下揃い*/
- align-self:center; /*縦の中央揃い*/
- align-self:stretch; /*縦100%表示*/
この記事へのコメント