初心者の初心者による初心者のためのalign-items講座

こんばんは。
web制作会社への就職を目指している、twitter上の「#駆け出しエンジニアとつながりたい」でおなじみの駆け出しエンジニアのひとりです。2回目の投稿です。例のごとく、間違ったこと書いていたらガッツリ怒ってください。

今回はalign-itemsのことを理解できていないことが分かったので改めて調べてみました。
今回のコードはこんな感じで、これに少しずつ書き足して変化を見ていきました。

      <!--html-->
        <div class="inner1">
            <div class="item1">1111111111111111</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
        </div>

        //sass
        .inner1{
            display: flex;
            border: solid 1px ;
            height: 300px;  
            margin-left: 100px;
            .item1{
                background-color:$orange ;
                display: inline;                
                
            }

            .item2{
                
                background-color: $green;
            }

            .item3{
                background-color: $yellow;
                
            }
        }





それでは早速どうぞ！

<h2>align-itemsを一言でいうと</h2>
align-itemsの役割を一言でいうと、フレックスボックス(display:flex;を当てている要素)内部の子要素の<strong>位置</strong>と<strong>大きさ(幅、高さ)</strong>を変更することだと思いました。

下記サイトには、align-itemsの説明として「フレックスボックスでは<strong>交差軸</strong>方向のアイテムの配置を制御します」と書いていました。
https://developer.mozilla.org/ja/docs/Web/CSS/align-items

駆け出しエンジニアの皆さん、<strong>交差軸</strong>って何?と思いましたよね?
僕も思いました。

交差軸という言葉は①「縦」②「横」の2パターンに読み替えられるようです。

①フレックスボックス内の要素が横並びの場合、「交差軸」⇒「縦」です。
　<strong>縦</strong>方向での<strong>位置</strong>を調整できるということです。

②フレックスボックス内の要素が縦並びの場合、「交差軸」⇒「横」です。
　<strong>横</strong>方向での<strong>位置</strong>を調整できるということです。
①と②の場合を再現したのでスクショを貼ります。

<h2>①のパターン</h2>
フレックスボックス内部の要素が横並びになっていますので、「交差軸」⇒「縦」です。

<img width="1105" alt="①-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603163/1d4849b1-7bc9-583f-402d-c0cfeb64575a.png">

次にフレックスボックスにalign-items:center;を加えました。
それにより、子要素の<strong>位置が縦方向の中央</strong>に移動し、<strong>大きさがテキストと同じくらいに変化しています</strong>。

<img width="1108" alt="①-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603163/cb479c11-a2b8-d0fc-74d1-c1cc52ddaf58.png">

align-items:center;を加えたことによって、
フレックスボックス内にある子要素の<strong>縦方向の位置</strong>と<strong>大きさ</strong>が変わったのです。

<h2>②のパターン</h2>

flex-direction:column;を加え、フレックスボックス内部の子要素を縦並びに変更しました。
フレックスボックス内部の子要素を縦並びになっていますので、「交差軸」⇒「横」です。
<img width="1111" alt="2-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603163/db30cba3-8d0d-0ebb-2a55-ebdc7c043d30.png">

次にフレックスボックスにalign-items:center;を加えました。
それにより、子要素の<strong>位置が横方向の中央</strong>に移動し、<strong>大きさがテキストと同じくらいに変化しています</strong>。

<img width="1097" alt="２2-.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603163/8dfbbb02-71b2-129e-facf-5060351bdd2a.png">

align-items:center;を加えたことによって、
フレックスボックス内にある子要素の<strong>横方向の位置</strong>と<strong>大きさ</strong>が変わったのです。

<h2>結論</h2>
align-itemsはフレックスボックスに当ててあげることで、その内部の子要素の位置を調整できる。

<h2>おまけ</h2>

位置を調整するプロパティにはalign-selfというもあります。
親要素(フレックスボックス)に対して当てるalign-itemsに対して、align-selfは子要素単体に対してあててあげて、その位置を調整することができます。

黄色のitem3に対して、align-self:flex-end;を当てると、
item3のみ最下部に移動しているのがお分かりでしょうか?
その他のitemが中央にあるのは、親要素(フレックスボックス)にあてたalign-items:center;が効いているからです。

<img width="1113" alt="お無題.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603163/854d47fa-c0bb-413a-0c59-fbf388816813.png">



align-items はitemに複数形の「s」がついているので複数の子要素に一括で変化を与えるイメージですかね。align-self　のselfは「自己」とか「自身」とかいう意味で、子要素「自身」に当てて、変化を与えるというイメージですかね。




頑張って書いたので誰かの参考になれば幸いです。
優しいコメント、厳しいコメントお待ちしています！