２カラム交互レイアウト
画像と文章が交互になっている２カラムレイアウトをつくりましょう。
sectionタグに、display:flex;を指定します。
sectionタグが、flex container（親要素）です。
divタグがflex-item（子要素）です。
imgタグとpタグをそれぞれdivタグで囲っているので、横並びになります。
justify-content: space-between;をすることで、要素間に空白を均等配置します。
flex-direction: row-reverse;とすることで、フレックスボックスの向き（主軸と交差軸）が逆（右から左）になり、画像が右から配置されます。
flex-direction: row-reverse;を特定の要素（偶数番目や奇数番目）に指定することで、交互な２カラムレイアウトがつくれます。
総まとめ
フレックスボックスとは？
フレックスボックスとは、Webサイトのレイアウトが簡単にできる便利なCSSの機能です。
フレックスボックスは、親要素＋子要素でセットになります。
親要素に対して、display:flex;を指定すると、子要素が横並びになります。
flex:1;と指定すると、指定した子要素が画面幅いっぱいに拡大されます。
flex Container（親要素）で使えるプロパティ
flex-direction
フレックスボックスの向き（主軸と交差軸）を決めるプロパティです。
flex-direction: row は、初期値で左から右です。
flex-direction: row-reverseは、右から左です。
flex-direction: columnは、上から下です。
flex-direction: column-reverseは、下から上です。
justify-content
フレックスボックス内の揃え方（主軸に沿って）を決めるプロパティです。
justify-content: flex-startは、左揃えです。
justify-content: flex-endは、右揃えです。
justify-content: centerは、中央揃えです。
justify-content: space-betweenは、空白を要素の間に均等配置します。
align-items
フレックスボックス内の行間位置（交差軸に沿って）を決めるプロパティです。
align-items: flex-startは、上揃えです。
align-items: flex-endは、下揃えです。
align-items: centerは、中央揃えです。
flex-wrap
フレックスボックスの折り返し（主軸に沿って）を決めるプロパティです。
flex-wrap: nowrapは、折り返さずコンテナ内に収まるように自動調整されます。
flex-wrap:wrapは、左上から並べて、下へ折り返します。
flex-wrap: wrap-reverseは、左下から並べて、上へ折り返します。
align-content
フレックスボックスの折り返しに対する行間位置（交差軸に沿って）を決めるプロパティです。
align-content: flex-startは、上揃えです。
align-content: flex-endは、下揃えです。
align-content: centerは、中央揃えです。
align-content: space-betweenは上下均等揃えです。
flex-flow
flex-directionとflex-wrapの一括指定プロパティです。
flex Item（子要素）で使えるプロパティ
align-self
flex Item（子要素）の行間位置（交差軸に沿って）を決めるプロパティです。
align-self: flex-start;を指定すると、上揃えになります。
align-self: flex-end;を指定すると、下揃えになります。
align-self: center;を指定すると、中央揃えになります。
order
flex Item（子要素）の順番（主軸に沿って）を決めるプロパティです。
初期値は、order: 0; です。
flex-basis
flex Item（子要素）のサイズ（主軸に沿って）を決めるプロパティです。
flex-basis: auto;では、widthやコンテンツの幅になります。
flex-basis: 200px;では、サイズが上書きされます。
max-width（最大幅）やmin-width（最小幅）で制限されている場合は、上書きされません。
flex-grow
flex Item（子要素）のサイズの拡大（主軸に沿って）するためのプロパティです。
flex:grow:0が初期値で、flex Item（子要素）のサイズです。
flex-grow:1;にすると、flex Container（親要素）の余っている幅が指定した比率で割り当てられて、flex-Item（子要素）のサイズが拡大します。
flex-shrink
flex Item（子要素）のサイズの縮小（主軸に沿って）するためのプロパティです。
flex-grow:1;が初期値で、flex Container（親要素）の足りない幅が指定した比率で割り当てられて、flex-Item（子要素）のサイズが縮小します。
一括指定プロパティ（flex）
flexを使うと、basisi・grow・shrinkを一括して指定することができます。
flex: initial;とすると、初期値が設定され、領域が余っても伸ばさない、領域が足らなかったら縮めるという指定になります。
flex-drow: 0;
flex-shrink: 1;
flex-basis:auto;
flex: auto;とすると、領域が余ったら伸ばす、領域が足らなかったら縮めるという指定になります。
flex-drow: 1;
flex-shrink: 1;
flex-basis:auto;
flex: none;とすると、領域が余っても伸ばさない、領域が足らなくても縮めないという指定になります。
flex-drow: 0;
flex-shrink: 0;
flex-basis:auto;
flex: 1; とすると、領域に合わせて、指定した比率で伸びたり、縮めたりする指定になります。
flex-drow: 1;
flex-shrink: 1;
flex-basis:auto;
2カラムレイアウト
WEBサイトでよくみる、メインとサイドバーのレイアウト（２カラムレイアウト）を作りましょう！
メイン部分とサイドバー部分をdivで囲い、class=”container”を設定します。
がflex Container（親要素）です。
メイン部分とサイドバー部分がflex-iItem（子要素）です。
サイドバー部分のwidthを固定して、メイン部分をflex:1;とします。
サイドバーは固定幅となり、メイン部分の幅は領域に合わせて、指定した比率で伸びたり、縮めたりする指定になりました。
3カラムレイアウト
WEBサイトでよくみる、メインとサイドバー、ナビのレイアウト（3カラムレイアウト）を作りましょう！
メイン部分とサイドバー部分、ナビ部分をdivで囲い、class=”container”を設定します。
がflex Container（親要素）です。
メイン部分とサイドバー部分、ナビ部分がflex-iItem（子要素）です。
サイドバー部分とナビ部分のwidthを固定して、メイン部分をflex:1;とします。
ナビ部分を左にするために、order:-1;とします。
サイドバーは固定幅となりました。
ナビ部分は固定幅となり、一番左へ配置されました。
メイン部分はサイドバー部分とナビ部分以外の領域で、伸び縮みするようになりました。
縦のレイアウト
フレックスボックスで、Webサイトの縦レイアウトを作りましょう。
ヘッダーとフッダーが固定され、メイン部分が伸び縮みするレイアウトです。
bodyに対して、display: flex;を指定するとbody（ページ全体）がflex Container（親要素）となります。
（ヘッダー）、（ナビ、メインサイド）、（フッダー）のそれぞれがflex-item（子要素）となります。
flex-direction: column;とすると、flex-Item(子要素）は上から下に並びます。
htmlセレクターとbodyセレクターに、height: 100%;を指定して、高さを設定することが必要です。
なお、フレックスボックスでは、marginの相殺が発生しないことも覚えておきましょう。
中央配置にする
要素を中央配置にする方法です。
display: flex; でフレックスボックスを設定します。
justify-content: center; で横幅に対して中央になります。
align-items center; で縦に対して中央になります。
上記２つを組み合わせることで、要素の中央揃えができます。
ヘッダーレイアウト
画像とメニューが横並びのヘッダーレイアウトをつくりましょう。
headerにdisplay: flex;を指定します。
headerがflex container（親要素）です。
imgやnavは、flex-item（子要素）です。
navに対して、margin-left: auto;を指定すると、メニューが右寄せになります。（空白がメニュー左に指定されたため）
さらに、nav ul にも、display: flex;を指定します。
nav ul がflex container（親要素）です。
liやaは、 flex-item（子要素）となり、横並びになりました。
nav aに対して、widthやline-heightを設定すると、リンクが押しやすくなるのでgoodです。
aタグはinline要素なので、そのままでは幅や高さが設定できません。
aタグに対して、display: block; を設定すると、幅や高さも設定できるようになります。
aタグは押しやすいように、ブロック要素にして幅と高さを設定するのがおすすめです。
２カラム交互レイアウト
画像と文章が交互になっている２カラムレイアウトをつくりましょう。
sectionタグに、display:flex;を指定します。
sectionタグが、flex container（親要素）です。
divタグがflex-item（子要素）です。
imgタグとpタグをそれぞれdivタグで囲っているので、横並びになります。
justify-content: space-between;をすることで、要素間に空白を均等配置します。
flex-direction: row-reverse;とすることで、フレックスボックスの向き（主軸と交差軸）が逆（右から左）になり、画像が右から配置されます。
flex-direction: row-reverse;を特定の要素（偶数番目や奇数番目）に指定することで、交互な２カラムレイアウトがつくれます。
コメント