CSS

FlexBox-CSS

FlexBoxを使うと柔軟にBOXを配置できる。
簡単に入れ子構造のBOX配置を実現できた。

サンプル

基本構造(scss形式）

. wrap{
    display:flex;
    item{
      子要素の設定
    } 
}

HTML

<html>
<body>   
<div class = "firstwrap">
  <div class = "secondwrap">
    <div class="nakabox">
      <div class = "box">中央1</div>
      <div class = "box">中央2</div>
      <div class = "box">中央3</div>
      <div class = "box">中央4</div>
    </div>
  </div>
</div>
</body>
</html>

CSS（SCSS形式）

.firstwrap{		　　1番大外の枠。灰色部分のクラス
   display:flex;	　　flexboxを設定
   justify-content: center;	　　子要素を水平方向で中央にする。灰色の中の青色部分が水平中央となる
   background-color:gray; 	　　背景を灰色

  .secondwrap{	　　青色部分のクラス
    width:960px;	　　幅　960px
    height:200px;	　　高さ200px
    background-color:blue;	　　背景　青色
    display:flex;		　　flexboxを設定
    align-items: center;	　　縦方向で中央にする。青の中のオレンジ部分が垂直方向で中央となる。

    .nakabox{		　　オレンジ部分のクラス
      width:100%;	　　幅を親要素の幅100%にする。つまり960pxとなる	
      display:flex;	　　 flexboxを設定
      justify-content:center;	　　子要素を水平方向で中央にする。オレンジの中の緑部分が水平中央となる

      .box{		　　緑部分のクラス
        display:flex;	　　Flexboxを設定
        justify-content: center;　子要素を方向で中央にする。緑の中の文字部分が水平中央となる
        align-items: center;	　　縦方向で中央にする。緑の中の文字部分が垂直方向で中央となる。
        width:20%;	　　幅を親要素の20%にする。つまり960＊0.20＝192px
        height:50px;	　　高さを50pxにする
        background-color:green;  背景を緑
        border:1px solid #fff;	　　緑のボックスの枠線。線の太さ1px、実線、白色
    }
  }
}

かなり便利！
Flexboxを使えば簡単に枠の中で中央ぞろえができたり、好きな場所に簡単に配置できるので、これだけ使えれば結構柔軟に画面が作れるのではと思った。

あと確認していくなかで、基本なんだろうけど、divについては、幅、高さを指定しない場合は、子要素の幅、高さとなる。
これがわかった！
幅は親要素を元に%指定で設定して、高さは設定しないことが多かったけど、高さは子要素の高さとなるので設定する必要がなかったということ。

-CSS