ドットインストール 詳解CSS Flexbox編 【簡単に横並びのレイアウトを作成できます】

ドットインストールまとめ記事、今回は「詳解CSS フレックスボックス編」です。

【この記事はこんな方におすすめ】

以下のような方に向けてかいてます。

• HTML/CSSの基本を勉強し終えた方
• プログラミングの基礎学習を始めて数週間~1ヶ月の方
• ドットインストールを使ってプログラミング学習をしている方
• CSSを使ったレイアウト作成にお悩みの方

→フレックスボックスについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！

ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。

↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓

togo-blog.hatenablog.jp

それではいきましょう〜

【Flexboxの基本】

・display: flex;
親要素をFlexboxに指定(①)
指定した要素をflex containerという。
子要素はflex itemといい、左から右、上から下の順で1,2,3…と番号が振られる(②)

・flex : 1
指定した番号のflex itemの幅を可変にする(③)

【Flexboxを利用した2カラムレイアウトの作成】

①MainとAsideをdiv要素の中に入れ、クラスセレクタを用いてFlexboxを作成
②Mainは幅をいっぱい広げたいのでflex:1;とする。するとasideの100px(③)を覗いた余白を全てMainに割り当て幅が可変になる

補足:2カラムレイアウト
サイドバーとメインコンテンツを横に並べて配置するレイアウトのこと。
例：トヨタ自動車株式会社　キャリア採用情報

www.toyota-careers.com

【Flexboxを用いた3カラムレイアウトの作成】

①order
flex itemに使用することでflexbox内での並び順を変えることができる。初期値では左から0,1,2…となっている。一番左に持ってきたい場合①のように-1と指定

補足
3カラムレイアウト

メインコンテンツを中央に、左右にメニューや広告などを配置した３段組のレイアウト。

例：岡山一番街　さんすて岡山HP

okayamaeki-sc.jp

【Flexboxで縦方向に要素を配置する-1】

・flex-direction
Flexboxの主軸(主となる要素の配置の方向)を決める。columnとすると主軸が縦方向になる。…①
・flex:1
Flexcontainr(body)に余白があれば全てcontainerクラスに入れる。…③

・height: 100%;
Flex:1;は主軸方向に余白がある場合にのみ適用される。ここではFlexcontainerの高さを②のように指定することでWEBページ全体の高さを主軸方向の長さとしている
・Flexboxではmarginの相殺が発生しない。よって④は2つのmarginを足した高さになっている

【Flexboxを用いて要素を中央揃えにする】

①justyfy-content
要素の主軸方向の並べ方を指定
値はcenter：中央揃え
flex-start：主軸の始点に揃える
flex-end：主軸の終点に揃える
②align-item
要素の交差軸方向の並べ方を指定値とスタイルは①と同様

【Flexboxを用いてヘッダーメニューを作成-1】

①justify-content : space-between;
Flexitemを主軸方向の両端に配置し、間にスペースを空ける
②margin-left(right): auto;
Flexitemを並べた時にできるulの右側の余白を左に持ってきてulを右端に移動させる

【Flexboxを用いてヘッダーメニューを作成-2】

①ulをFlexboxにし主軸方向(横)にaを配置
②widthの指定
③中央揃え
④aのheightをロゴに揃える
⑤aはinline要素でwidth,heightの指定ができないのでblock要素に変える
⑥カーソルが乗った時に背景色を変更

【Flexboxを用いて画像と文章を交互に配置】

・偶数番目のsectionだけFlexbox内での並び順を逆にする…①
・marginは②の形ではなく、④を用いてFlexbox内の要素間に均等に配置する。その際③のようにテキストのwidthをcalcを用いて全体に対する割合とする

【復習】

最後に記憶に定着するように復習します。

今回はCSSのフレックスボックスを扱いました。

重要なプロパティがたくさん出てきたので以下に整理します。

★親要素に指定

• display: flex;…親要素(flex container)に指定することでFlexboxを作成。子要素(flex item)に左→右、上→下の順で番号が振られる
• flex-direction…flex containerに指定することでFlexbox内での要素の並ぶ方向を指定。初期値はrow(横)
• justify-content…Flexbox内での要素の主軸方向の揃え方を指定。 center(中央揃え),flex-start(始点揃え),flex-end(終点揃え)
• justify-content: spacebetween;…flex itemsを主軸方向の両端に配置し間にスペースを空ける
• align-item…Flexbox内での要素の交差軸(主軸と垂直)方向での揃え方を指定。指定方法はjustify-content同様

★子要素に指定

• flex: 1;…余った余白を全て割り当てる。2カラムレイアウトや3カラムレイアウトの作成に使える
• order…flex itemsに指定することでFlexbox内での並び順を変える

いかがでしょうか？

基礎文法編からみると随分と難易度があがりましたね…

途中で紹介した2カラム,3カラムレイアウトは実際に多くのホームページで使用されているものです。

Googleで「2カラムレイアウト　例」などと調べていただければ、たくさん例が出てくると思います！

またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！

普段はTwitterでプログラミング・読書・教育等について発信しています。

この記事が参考になった方はぜひフォローよろしくお願いします！

Hello world! とぅーごです。#今日の積み上げ
・ブログ1記事
・ドットインストール「実践！アプリ紹介ページを作ろう！
」
・ハセブロ(@hbOnlineSalon @hasebe_yuusuke )勉強会参加

勉強のコツはインプットしたら即アウトプットすることです。

Twitterのおかげでよい学習ができています☺️

— 22日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月9日