
###こんにちは！ばーんです。

※この記事は主に初学者の方への記事となっています

今回はflexboxのメリットについてお話しします。
2019年以降にプログラミング学習されてる方の、多くはprogateを利用されてきたと思います。

そこでは、inline-blockやfloat、positionによる配置変更がメインなので、
flexboxに触れる機会が少なかったのでは？と思います（名前は知ってるはあるかもですが）。

自分自身も「知ってた方がいいよ〜」とは言われるものの、正直inline-block等でできなくもないので今まで使用してきませんでした。

**なので今回は使ってみてどういったメリットがあるのか調べていきます**

3つのパターンで検証します。
**1、要素の配置
2、子要素の変更　
3、レスポンシブ対応**
※記事の最後に使用したcodepen記載しています

完成イメージはこちら↓(右側はデザインカンプです)
<img width="812" alt="スクリーンショット 2019-12-14 23.51.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/e7562751-ec6e-1bdc-eb9d-2bef52e1a7f4.png">

####1、要素の配置
これは結論からいいます。**正直ほとんど変わりませんでした**
各工程で写真撮ったり、時間計ったり、行数比べましたが殆ど一緒。

ただし、これを見てる方は初学者の方だと思うので、自分も躓いたところ書いておきます。

**・指定の仕方（.proflieは親要素です）**
<img width="250" alt="スクリーンショット 2019-12-14 23.57.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/424865a3-e44b-3769-3b81-eca4ff2e3a9c.png">
色んなQiita見ましたが、親要素にdisplay:flex指定としか書いてないので、てっきりflex-direction: column;とかは、子要素に書くものだと思ってました…

**・要素の内容**(左：flex指定前　右：指定後)
<img width="862" alt="a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/225d353d-f30a-829c-0e93-a7a05187a373.png">
指定するとinline-blockのように横は指定したサイズになります（左はblock要素なので横幅いっぱいとってますね）


####2、子要素の変更

これもあまり差は見られませんでしたが、冷静に考えれば要素が少なかったのが要因です。
ただ、現状の知識でも処理できなくはないので、それほど大きいメリットとは感じませんでした。

####3、レスポンシブ対応
ここが一番差がでました（というより実践ではでると思います）。
レスポンシブにするとデザインが大きく変わります。その中で配置変更したいと思うことはあります。

今までの知識の場合、かなり労力を使いますが、配置の順序も変えれるのでかなり便利ですね。

###僕が感じた大きいメリット2つ
・上にも記述していますが、配置変更が容易なのは嬉しいですね！
**・スマホ社会（縦画面が一般的）の現状で、回り込まない！**
これ少し解説すると↓をご覧ください（上：flex 下：inline-block）
<img width="771" alt="x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/1600784f-d35c-598c-b058-b8f0b60241d0.png">

これ、3つの要素全てwidth34%で指定しています。また、レスポンシブで要素5、6を消してます。
ご覧の通り絶対回り込みません（全体的に少し短くなります）。

基本的には崩れない方がいいですが、崩れた時を考えると上の方がいいかなーと思います。


###【結論】知っておいた方が良いレベル。
ただし、わざわざ時間をかけてみっちり習得しなくてもよい。もちろん新しい技術なので、今から覚える人にはこっちの方をお勧めします。書いてる通りデメリットは特に見当たらなかったので。
*（できることを知っておいて、実践の中で覚えていく程度でいいと思います）*

(上：inline-block　下：flex　ご自由にご使用下さい＾＾)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="RwNGLdv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="inline-block">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/RwNGLdv">
  inline-block</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

[cv:issue_marketplace_engineer]


###こんにちは！ばーんです。

※この記事は主に初学者の方への記事となっています

今回はflexboxのメリットについてお話しします。
2019年以降にプログラミング学習されてる方の、多くはprogateを利用されてきたと思います。

そこでは、inline-blockやfloat、positionによる配置変更がメインなので、
flexboxに触れる機会が少なかったのでは？と思います（名前は知ってるはあるかもですが）。

自分自身も「知ってた方がいいよ〜」とは言われるものの、正直inline-block等でできなくもないので今まで使用してきませんでした。

**なので今回は使ってみてどういったメリットがあるのか調べていきます**

3つのパターンで検証します。
**1、要素の配置
2、子要素の変更　
3、レスポンシブ対応**
※記事の最後に使用したcodepen記載しています

完成イメージはこちら↓(右側はデザインカンプです)
<img width="812" alt="スクリーンショット 2019-12-14 23.51.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/e7562751-ec6e-1bdc-eb9d-2bef52e1a7f4.png">

####1、要素の配置
これは結論からいいます。**正直ほとんど変わりませんでした**
各工程で写真撮ったり、時間計ったり、行数比べましたが殆ど一緒。

ただし、これを見てる方は初学者の方だと思うので、自分も躓いたところ書いておきます。

**・指定の仕方（.proflieは親要素です）**
<img width="250" alt="スクリーンショット 2019-12-14 23.57.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/424865a3-e44b-3769-3b81-eca4ff2e3a9c.png">
色んなQiita見ましたが、親要素にdisplay:flex指定としか書いてないので、てっきりflex-direction: column;とかは、子要素に書くものだと思ってました…

**・要素の内容**(左：flex指定前　右：指定後)
<img width="862" alt="a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/225d353d-f30a-829c-0e93-a7a05187a373.png">
指定するとinline-blockのように横は指定したサイズになります（左はblock要素なので横幅いっぱいとってますね）


####2、子要素の変更

これもあまり差は見られませんでしたが、冷静に考えれば要素が少なかったのが要因です。
ただ、現状の知識でも処理できなくはないので、それほど大きいメリットとは感じませんでした。

####3、レスポンシブ対応
ここが一番差がでました（というより実践ではでると思います）。
レスポンシブにするとデザインが大きく変わります。その中で配置変更したいと思うことはあります。

今までの知識の場合、かなり労力を使いますが、配置の順序も変えれるのでかなり便利ですね。

###僕が感じた大きいメリット2つ
・上にも記述していますが、配置変更が容易なのは嬉しいですね！
**・スマホ社会（縦画面が一般的）の現状で、回り込まない！**
これ少し解説すると↓をご覧ください（上：flex 下：inline-block）
<img width="771" alt="x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/1600784f-d35c-598c-b058-b8f0b60241d0.png">

これ、3つの要素全てwidth34%で指定しています。また、レスポンシブで要素5、6を消してます。
ご覧の通り絶対回り込みません（全体的に少し短くなります）。

基本的には崩れない方がいいですが、崩れた時を考えると上の方がいいかなーと思います。


###【結論】知っておいた方が良いレベル。
ただし、わざわざ時間をかけてみっちり習得しなくてもよい。もちろん新しい技術なので、今から覚える人にはこっちの方をお勧めします。書いてる通りデメリットは特に見当たらなかったので。
*（できることを知っておいて、実践の中で覚えていく程度でいいと思います）*

(上：inline-block　下：flex　ご自由にご使用下さい＾＾)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="RwNGLdv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="inline-block">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/RwNGLdv">
  inline-block</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

続きを読むには年収が100万円増加が見込める単価診断を受けてください 30秒

続きを読むには年収が100万円増加が見込める
単価診断を受けてください 30秒