Flexboxについて

2021年1月12日 13:06

Flexbox（フレックスボックス）とは、

フレキシブルで簡単にレイアウトが組めるボックスです。

divタグで、boxを3つ指定します。

     <div>box1</div>
     <div>box2</div>
     <div>box3</div>

縦方向に並びます。

Flexboxの使い方

これを横方向に並べたいときに

使えるコードがFlexboxです！

Flexboxを指定する時は、親要素が必要になります。

HTMLコード

<div class="container">　　→　親要素
     <div class="box1">box1</div>
     <div class="box2">box2</div>
     <div class="box3">box3</div>
</div>

親要素にdisplayプロパティを指定します

CSSコード

.container{
   display: flex;
}

右側の余白を無くすこともできる

.box2{
   background-color: yellow;
   flex: 1;
}

box2にflexプロパティを指定すると

画面の大きさによって幅が変化します。