＜勉強ログ＞CSS FLex-wrapプロパティ

今日はflex-wrapプロパティについてです！
継続的に勉強を続けていたつもりだけど、もう結構時間が経過していてびっくり…。ウェブデザインは勉強することが結構あるなあ…。

〇ひかりうみ　note〇

（１）flex-wrapは子要素の折り返しと、その方向を親要素で指定するプロパティ
　　　初期値はnowrap

　　　wrap

　　　wrap-reverse

（２）justify-content:space-between; 子要素の両端は親要素のめいっぱい端に寄せて、それ以外のスペースは等間隔にする指定
　　デメリット→子要素の横に並ぶ戸数が違う場合、バランスが悪くなる

　　回避方法→様々な方法があるが、flexboxにこだわる必要はない

もともとの横幅はこちら↓

☆子要素の右に30pxの余白を設定。そうすると一番右端の子要素のCの右の余白のせいで、下に折れ曲がってしまい、横に２つしか並ばない。

☆親要素の右にある余白を削除する
　margin-right:-30px;　　今回背景色をつけているので、余白が見えるが、背景が白の場合はこれでOK。

（３）justify-content:space-around;　に指定した場合は、子要素が等間隔になる

（４）子要素の横幅をまだ指定していないので、文字数が増えると見た目が崩れる

（５）子要素のwidthをつける過程で、まったく反応しない現象にであう。
　　　原因は子要素の名前の後ろに、「,」があったからだった。

（６）写真と文章をborderで囲む

写真と、枠線が2pxだけずれてしまう。

原因はボックスモデルが、box-sizing:border-box; と指定されてしまっているため。
reset cssには以下のように記述されている。

今回ずれてしまった子要素のCSSに初期値を指定する

実際にやってみた

A. display:flex;　を指定する

B. flex-wrap:wrap;　を指定する。文章が長いため、下にすべて並んでしまった

C. 子要素の横幅を写真の横幅と同じ300pxに指定すると、きれいにととのった

D. 等間隔にするためjustify-content:spac-between;を親要素に指定

E. 子要素のh3に対して　.item-A h3{margin: 16px 0 16px 8px}を指定

F. 子要素のpに対して　.item-A p{margin:8px 0 0 8px}を指定

G. 完成！

めちゃくちゃ忘れていてショック！！！

content-boxを復習する必要がある…。
これを自分で作れるイメージがまだわきませぬ。