Webデザイン勉強74日目の成長報告！
こちらのWebサイトは移転しました。
[ピュアチャ〜ジ]
はいどうも！
今日も動画で学習したので進捗報告を行います！
今日はflexboxの動画15本分やりました。
ドットインストールの動画は短いと2分とかで終わるので、結構サクサク進めた印象です。
display: flex = flexの指示を出す。今回だと要素を包むcontainerに対しての記述です。
flex-direction: column; = 縦方向に整列させる指示
flex-direciton: column-reverse = 縦方向で下から整列させる指示
flex-wrap: nowrap = 要素が横幅を超えても折り返さない（デフォルトはnowrap）
flex-wrap: wrap; = 要素が横幅を超えると折り返す
flex-wrap: wrap-reverse; = 要素が横幅を超えると折り返す（下から表示）
flex-flow: wrap row = 折り返し＆行方向 ※flex-flowは順不同で記述が可能
justify-content: flex-start; = 余白の設定であり、この記述だと上に揃える
justify-content: flex-end; = 余白の設定であり、この記述だと下に揃える
justify-content: center; = 余白の設定であり、この記述だと中央に揃える
※centerの場合は前に「flex」と記述がいらない
justify-content: space-between; = 角に要素を散らして、余白を均等配置
↓justify-content: space-betweenの例
justify-content: space-around; = 行方向の角に要素を散らして、余白を均等配置
（少し内側にパディングを設定してくれる）
↓justify-content: space-aroundの例
align-items: strech; = itemの縦幅が指定されていない時、指定されたboxの中で最大まで縦幅が伸びる記述
↓align-items: strech; の表示例
order: 1; = 表示の順番。デフォルトでは0となっているため、この記述だとbox-2,3が優先されて表示されるため一番後ろにまわる。
align-self: flex-end; = 縦幅方向で、下に合わせる記述
↓上記2個の記述をした際の表示例
【flexの記述】
flex: ○ ○ ○;
flex: grow shrink 横幅の順番を意味する
デフォルト値は0 1 auto
以下の記述は、80pxのboxが3個あり、それを包むcontainerが300だった時の余白の振り分け型の記述方法です。
余白=60px
1= 10px
2= 20px
3= 30px
今回は単純な余白の割り振りでした。
box1〜3に従って、横幅が大きくなっていることがわかります。
次は、box3個の合計値がcontainerの横幅を超えた時、どの割合でpx数を削るかという記述です。
(※.boxは不要でした）
boxの横幅合計が360pxなので、containerの300pxより60px増えています。
これを割り振ると、1=10px , 2=20px , 3=30px こちらを削っています。
表示例
発生するmarginを希望の場所へ移動する方法
以下ではbox-3のmargin-left: auto; と記述してbox−3の左側に60pxの余白を開けています。
表示例
要素を中央に配置する方法
justify-content: center; = 行方向に中央に配置
align-items: center; = 列方向に中央配置
表示例
画像の横に文章を記述する方法
↓HTML↓
↓CSS↓
画像、文章を包むclassに対してdisplay:flex; と記述 = 画像と文章が横並びになる
align-items: flex-start; = 要素を上方向に揃える
flex-direction: row-reverse; = 行方向に対して、表示順番を逆転させる
↓表示例↓
横幅の表示サイズに応じて、要素の横幅を変更する指示
※ポイントはCSS（左側）
flex: 0 100px = widthを100pxで指定して、かつそれ以上の横幅があっても割り振らない（割合は0）
flex: 1; = growの数値が1という意味。この場合、他が0なので割合の1は100%を意味する。
つまり、横幅が大きくなればなるほど.centerの横幅が広がるという意味。
↓横幅が狭い時↓
↓横幅が広い時↓
上記を設定しつつ、更に横幅が一定の数値を下回った時に要素を縦並びにする記述
-------------------------------------------------------
@media all and (max-width: 500px) { ←横幅500px以下の時
.container { ←containerは縦方向
flex-direction:column;
}
.center {
order:1; ←表示順番1
width: 100%
}
.left {
order:2; ←表示順番2
width: 100%
}
.right {
order:2; ←表示順番3
width: 100%
}
-------------------------------------------------------
↓横幅が広い時↓
↓横幅が狭くなった時↓（centerが一番上で、left,rightの順番で表示される）
こんな感じです！
flexboxはサクサク進んで楽しかったです！
ドットインストールで学習しているんですが、その人の説明がすごくわかりやすくてサクサク前に進めています！
今日は、ここまで！
