１．flexの中身が階層のない要素のみなら、
親要素にflexをかけるだけで済む。
例：
<header>
<img src="img/icon1.jpg" alt="">
<img src="img/icon1.jpg" alt="">
</header>
header {
display: flex;
justify-content: space-between; /* 左右均等分布 */
}
２．どうやら中身のなかに階層があると、
階層の親にもflexをかける必要がある？
例：
<header>
<img src="img/icon1.jpg" alt="">
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
</ul>
</header>
header {
display: flex;
justify-content: space-between; /* 左右均等分布 */
}
ul {
display: flex;
align-items: center; /* 上下中央揃え */
}
前に自分で同じことを書いていた
(自習分について)
ヘルセム
headerにもその中のulにもflexが必要
flexって掛け方がまだいまひとつ分からないんだよな。
これでも動くのが理解できない。
<header>
<h1>World Plans Berry</h1>
<p class="common_box water_box"><a href="user_form.php">ユーザー登録</a></p>
<p class="common_box water_box"><a href="user_form.php">ログイン</a></p>
</div>
</header>
header{
background-color: #FFA500;
padding:1rem;
display: flex;
justify-content: space-between; /* 左右均等分布 */
}
