2月11日 【HTML＆CSS】難しいよ...縦並び横並びorz
今日は、プログラミングスクールの復習ドリルで混乱させられたところをアウトプットしていきたいと思います。
私がやった復習ドリルはHTML＆CSSでした。
至る所がわからない、出来ないの連続で、勉強する速度が進まない進まない（笑）
ちょっとこれで大丈夫なのかと不安にもなっていますが、本試験は落ちても再試があるそうなので、とりあえず、自分の学習のために進めようと気を落ち着かせて、やっていました。
ということで、わからないの連続の私ですが、一番わかりにくく、学習中「どうやるんだよー！」と叫んでしまったところをアウトプットしていきたいと思います。
私が悩んだのは同じセクション内で先に横並びになっている子要素二つの下（左側の子要素の下です）に追加子要素を加えるというものでした。
同じセクション内、つまりは親要素一緒の中でdisplay:flex;をかけている中、どうやってそれだけを縦並びに？！と悩みました。
ググりました。wrapの存在を知りました。
でも、違うんです、これじゃない。
唸りましたが、結局答えを見ることに。
結果：
単純にHTMLで左側子要素と追加子要素を同じ親要素に繋げばよかった
（親要素は作成する）
基本ブロック要素は左上に積まれていく積み木イメージ。
display:flex;（横並び）がかかっていない子要素は縦に並ぶ...と。
なんてシンプルな答え！！
なるほどと思いました。
私はついモノを複雑に考えがちなので、もっとシンプルに考えていかないといけないなと感じました。
上で、文章でアウトプットしたのですが、もしかしなくても、わかりづらいと思うので、例を作成してみました。
少しでもわかりやすくなるといいのですが...
HTML
<div class="abc_in_abc">
<div class="ac_in_abc">
<div class="a_in_abc">A</div>
<div class="c_in_abc">C</div>
</div>
<div class="b_in_abc">B</div>
</div>
↓
.a_in_abc {
background-color: blue;
width: 50px;
height: 50px;
}
.b_in_abc {
background-color: brown;
width: 50px;
height: 50px;
}
.c_in_abc {
background-color: coral;
width: 50px;
height: 50px;
}
.abc_in_abc {
display: flex;
}
上記内容のファイルをプラウザで開くと下のようになります。
また、私の反省点もここに記載させていただきます。
【私の反省点】
A、B、Cの子要素を一つ一つで考えてしまい、子要素３つの一つをどうやって下に持ってくるかと悩んでしまった。
そうではなく、単体３つで難しいなら子要素を入れる箱（親要素）を作って二つの子要素にしよう！という発想をすべきだった
全てがそこにあるものでなんとかするのでなく、増やしたり減らしたりしながら、コーディングしていく
ちなみに余談ですが、私、最初は答えを見ても結果部分に行きつきませんでした。
AとCをdisplay:flex;で縦並びにするのだと思っていたんです。
でも、このブログを書くために試しコードを書いて、あれ？ってなって考えた結果、この形に気づくことが出来ました。
アウトプットって大切ですねぇ笑
最後までお読みいただき、ありがとうございましたm(_ _)m
