【HTML / CSS】フレックスボックスの基礎

## はじめに
学習したことを自分用の参考書のようにまとめていきます。

## フレックスボックスとは

アイテムを縦方向や横方向に並べて表示するための命令です。

基本的にdivなどのアイテムは縦並びになります。
そこでフレックスボックスを使い、横並びにしてレイアウトを作っていくのがWeb制作の基本になります。

よく使うので使いこなせるようになりましょう！！


## display: flex;

" display: flex; "を指定すると、子要素が横並びになります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PovMZNP" data-pen-title="Untitled" data-user="yuya-o" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuya-o/pen/PovMZNP">
  Untitled</a> by yuya o (<a href="https://codepen.io/yuya-o">@yuya-o</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## justify-content: space-between;

" justify-content: space-between; "とすることで、フレックスボックスの並びを指定することができます。

親要素の幅いっぱい均等に配置する時に使います。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzbmwZK" data-pen-title="justify-content: space-between;" data-user="yuya-o" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuya-o/pen/YzbmwZK">
  justify-content: space-between;</a> by yuya o (<a href="https://codepen.io/yuya-o">@yuya-o</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## justify-content: space-around;

" justify-content: space-around "も、同じように親要素の幅いっぱい均等に配置されるのですが、両端に余白ができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaeXqzw" data-pen-title="justify-content: space-around" data-user="yuya-o" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuya-o/pen/BaeXqzw">
  justify-content: space-around</a> by yuya o (<a href="https://codepen.io/yuya-o">@yuya-o</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## flex-wrap: wrap;

" flex-wrap: wrap; "を、指定すると子要素を折り返して並べることができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYQgmPO" data-pen-title="flex-wrap: wrap;" data-user="yuya-o" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuya-o/pen/zYQgmPO">
  flex-wrap: wrap;</a> by yuya o (<a href="https://codepen.io/yuya-o">@yuya-o</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## flex-direction: column;

" flex-direction: column; "を、指定すると子要素を縦並びにすることができます。
スマホ対応にする場合などによく使われるので覚えておきましょう。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaeXeRm" data-pen-title="flex-direction: column;" data-user="yuya-o" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuya-o/pen/BaeXeRm">
  flex-direction: column;</a> by yuya o (<a href="https://codepen.io/yuya-o">@yuya-o</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## さいごに
いかがだったでしょうか。

他にもいろいろな記事を書いているのでぜひ読んでいただけたら嬉しいです。

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction