【CSS】 display flexの小技を紹介

## はじめに
実案件のフロントエンド開発でcssを書いていく上でdisplayflexってめっちゃ使いますよね。
今日はそんなdisplay flexを使う上での小技をいくつか紹介したいと思います。

## 活用例

### こいつだけ右にしたい
`display:flex`はオブジェクトを横に整列させるプロパティです。
`justify-cotnent`を使って整列の仕方を調整はできますが、こんなパターンはありませんか？

![１個だけ右-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/165b4bde-5235-c48d-e534-9d5ab0fc8ec3.png)
DOMをflexBoxでまとめたけど基本は左寄せで、特定のDOMだけ右寄せにしたい。。。
そんな時は右寄せにしたいDOMに対して`margin-left:auto`をするだけ！!

![１個だけ右-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/c615d739-8336-b343-ead6-ddf60c481304.png)

flexBoxを`justify-content: flex-end`にしてる場合は左寄せにしたいDOMに対して`margin-right:auto`にすると、特定のDOMだけ左寄せにできます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyEdqYv" data-pen-title="Untitled" data-user="dtweqbgd-the-vuer" 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/dtweqbgd-the-vuer/pen/dyEdqYv">
  Untitled</a> by Hayuse (<a href="https://codepen.io/dtweqbgd-the-vuer">@dtweqbgd-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 横並びにもしたいけど改行もしたい
例えば、タグなどの一覧を作りたい時。
![改行-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/738486c8-1afb-c22b-28e0-35436f00b73f.png)
中身が不規則に変わるタグなどはうまく改行してほしいですよね。
そんな時は`flex-wrap: wrap`をつけるだけ！

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abrqaLB" data-pen-title="Untitled" data-user="dtweqbgd-the-vuer" 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/dtweqbgd-the-vuer/pen/abrqaLB">
  Untitled</a> by Hayuse (<a href="https://codepen.io/dtweqbgd-the-vuer">@dtweqbgd-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ここだけスクロールしたい
タイトルとコンテンツが分かれいるタイプのカードのスタイルでは、コンテンツだけスクロールしたいという時があります。
![スクロール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/1c932872-9388-83dd-05f6-8846e790503c.png)
コンテンツ量や、タイトルの高さが変わってもいい感じに自動で調整してほしいって時ありますよね。
そんな時はflexしてる要素に`flex-direction: column`をつけるだけ！
flexしている要素の親が高さを明確にする必要がありますが、それさえすれば、中のスクロールの高さは自動で調整してくれます。
![スクロール2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/2f5d8ddc-44e3-6719-b093-76e5fdf8be8a.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzbeJKO" data-pen-title="Untitled" data-user="dtweqbgd-the-vuer" 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/dtweqbgd-the-vuer/pen/YzbeJKO">
  Untitled</a> by Hayuse (<a href="https://codepen.io/dtweqbgd-the-vuer">@dtweqbgd-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 終わりに
こんな感じで、`display: flex`にフォーカスして小技を紹介してみました。
使い方次第でいろんな風にできるのでぜひ試してみてください。
まだまだ色々紹介したいことはありますが、夜も老けてきたのでこの辺で、、、、