フレックスボックスについて①

今回は前回の記事で作ったものからCSSのFlexboxを使っていきたいと思います。
今回取り上げるのはほんの一部なので、気になる場合は自分で調べてみてください👍

フレックスボックスとは

横の主軸と縦の交差軸を使ってやるみたいなんですね。全然わからないんで、詳しくは自分で調べてみてください😂
私はなんとなくわかったので、とりあえず、進みます😂

実装

結局なんだろうって方もとりあえず先に進んで見ましょう。
まず、index.htmlを書き換えます！　前回の記事はこちら！▶https://qiita.com/akari_0618/items/ac6eb7fae89f2329ed2c

index.html

<link rel="stylesheet" href="css/style.css">
<div class="container">
  <section class="case1">
    <h1>箇条書きリスト</h1>
   <ul>
     <li>あいうえお</li>
     <li>かきくけこ</li>
     <li>さしすせそ</li>
   </ul>
  </section>
  <section class="case2">
    <h1>順序付きリスト</h1>
    <ol>
      <li>あいうえお</li>
      <li>かきくけこ</li>
      <li>さしすせそ</li>
    </ol>
  </section>
  <section class="case3">
    <h1>説明リスト</h1>
    <dt>あなたの名前は？</dt>
    <dd>山田花子</dd>
    <dt>あなたは女性ですか？</dt>
    <dd>はいそうです</dd>
  </section>
</div>

少しわかりにくいですが、新たにdivクラスにcontainerという親要素を追加します。
親要素とクラスが不安な方は▶https://qiita.com/akari_0618/items/3526fd7b751d9387667d
それではcssをいじっていきますね！

style.css

.container {
  background-color: crimson;
  display: flex;
}
.case1 {
  background-color: aqua;
  width: 30%;
}

.case2 {
  background-color: burlywood;
  width: 30%;
}

.case3 {
  background-color: cornflowerblue;
  width: 30%;
}

子要素のcaseさんたちをwidth設定します！
そして、display:flex; を親要素に指定します！
『フレックスボックスはじまるよー！』の合図ですね👍

これを指定するとブラウザ上でこうなります。

横に整列しましたね！

次からは親要素に適応するフレックスボックスについて学んで行きましょう！