Zenn
🕌

【初心者向け/自習学習88日】CSSのflex containerについて

2023/08/26に公開
CSS
初心者
初心者向け
tech

はじめに

今日は、以前紹介したCSSの基礎について、記事を作成してみました。
基本的に、スタイル入れる方法を中心に勉強しましたが、これからはBox level, inline, animationなどを勉強し、初心者目線から理解した内容を初心者の方々に紹介していかいたいと思います。

<以前の記事一覧>

CSS基礎1編 styleとselectorについて
CSS基礎2編 inlineとboxのmarginについて

block level

Padding

先日は、ボックスを囲む見えないバリアmarginを紹介しました。
marginの場合、上下marginが重なってしまうmargin相殺があることが分かりました。
この問題を解決するためには、一つのmarginを2倍にする方法もありますが、
paddingとborderを活用することができます。

paddingはmarginと反対で、ボックスの内部にある境界線になります。
スマートフォンを考えてみましょう。スマートフォンは液晶とボディーで分けられています。そのボディのボーダー(border）ラインと内部の液晶のボーターの間がpaddingになります。

border

一番、分かりやすい概念で、ボックスの境界線です。inline elementもborderを持つことができます。主に border:(number)px solid:color という形で宣言されます

CODE

    <style>
      body {
        margin: 20px;
      }
      span {
        background-color: blueviolet;
        padding: 20px;
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <span>hello</span>
    <span>world</span>
  </body>

RESULT

Flex Box

Block、Inline Blockの場合、整列がとても難しかったので、それを解決するために現れたBlockがFlex Boxです。Flex Boxは2d layoutと相性抜群です。

以下がFlex Boxのルールです。

Flex Boxのルール

1.子要素(Childeren Element）には、何も記載してはいけない。親素養(Parent Element）をFlex Box（Flex Container) に作成する。

CODE

  <style>
    body {
      margin: 20px;
      display: flex;
    }
    div {
      width: 50px;
      height: 50px;
      background-color: teal;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>

RESULT

2.justify-contentは、main axix　を中心に整列する。main axixのdefaultは横だ。

3.align-item, align content は、cross axixを中心に整列する。cross axixのdefaultは縦だ。

https://webdesign.tutsplus.com/a-comprehensive-guide-to-flexbox-alignment--cms-30183t

CODE

 <style>
     body {
       margin: 20px;
       height: 100vh;
       display: flex;
       justify-content: space-evenly;
       align-items: center;
     }
     div {
       width: 50px;
       height: 50px;
       background-color: teal;
     }
     #second {
       background-color: indianred;
     }
   </style>

RESULT

Flex Container(子要素）

Flex Containerの中にまた、Flex Containerを作ることもできます。

CODE

    <style>
      body {
        margin: 20px;
        height: 100vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
      }
      div {
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        font-weight: bold;
        background-color: teal;
        flex-wrap: nowrap;
      }
      #second {
        background-color: indianred;
        color: whitesmoke;
      }
    </style>
  </head>
  <body>
    <div>FIRST</div>
    <div id="second">SECOND</div>
    <div>THIRD</div>
  </body>

RESULT

WRAP

Flex Containerは最初に宣言されたwidth,lengthをブラウザの大きさによって変更することもできます。横をmain axisにし、整列をした場合は整列を維持するためにwidthが減ることが分かりました。

このようなattributeをNO WRAPだといいます。整列を優先するため、本来の大きさを自動で変更します。大きさを優先にしたい場合は、各Flex Containerがぶつかる直前、配置を変更します。

このようなattributeをWRAPです。

Discussion