とても便利なFlexbox(その2)

  • このエントリーをはてなブックマークに追加
とても便利なFlexbox(その2)

配置間隔の制御も簡単にできる

前回Flexboxをつかったコンテンツ配置をご案内しました。使ってみると、とても便利な事に気が付きますね。
でも子要素の配置が難しい?とお考えではありませんか?
大丈夫、そんなことはありません。そうFlexboxならね。

右揃えや左揃えはもちろん、水平方向へのコンテンツ配置にも対応しているのがFlexbox!
もっと便利につかいこなしていきましょう。

■関連記事はこちら
とても便利なFlexbox(その1)

・基本的な利用について
・要素を並べる方向について

水平方向の揃えについて

親要素に余白が合った時、初期値では右側が空きますが、CSSを編集すればどの部分に余白を割り振るのかを決める事ができます。

例えば中央に寄せたり、右側に寄せたりできますし、均等に余白を配分して親要素に対して幅一杯に取る事もできます。

記述方法は単純で、1行追加するだけです。

.block{
display:flex;
justify-content:center;
}

justify-contentの指定について

flex-start(初期値) → 左揃えにする
flex-end → 右揃えにする
center → 中央揃えにする
space-between → 最初と最後の子要素を両端に配置、残りの要素は等間隔に配置する
space-around → 全ての子要素を等間隔に配置する

垂直方向の揃えについて

親要素の高さに対して、子要素の垂直方向への配置を指定する事ができます。
table要素でいうところの「vertical-align」のような使い方をすると思うとわかりやすいかもしれませんね。

.block{
display:flex;
align-items:center;
}

align-itemsの指定について

stretch(初期値) → 親要素の高さか、一番高い子要素に合わせて広げて配置する
flex-start → 上揃えにする
flex-end → 下揃えにする
center → 中央揃えにする
baseline → ベースラインで揃えて配置する

複数行にした時の揃えについて

子要素を沢山配置して、複数行になった時の垂直方向で揃える位置を指定します。

.block{
display:flex;
align-content:space-between;
}

align-contentの指定について

stretch(初期値) → 親要素の高さに合わせて広げて配置
flex-start → 上揃えにする
flex-end → 下揃えにする
center → 中央揃えにする
space-between → 一行目を親要素の上端に配置、最終行を親要素の下端に配置し、残りの子要素は間隔を均等にして配置する
space-around → 全ての子要素の上下間隔を均等にして配置する


ちなみにflex-wrapでwrap又はwrap-reverseを指定しないと、子要素が一行に並んでしまい、align-contentは適用されないので注意です。

水平垂直方向へコンテンツを揃えて配置する

Flexboxで配置したコンテンツを、水平垂直方向へ並べて配置する事ができます。
これまでtableで配置していた部分を置き換える事ができるので、レスポンシブWEBデザインを考える上で非常に役立ちますね。
使いこなして、思い通りのレイアウトを作っていきたいものです。
  • このエントリーをはてなブックマークに追加

新潟県内地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください