display: frex;の使い方 - tattaka

35日目です。
本日チャットアプリのチャット画面の見た目を実装している時に、サイドバー（ツイッターで言えばフォロー・フォロワー数、プロフィール、リストなどが一覧で出てくるような場所）は表示されるもの、ヘッダーが表示されない状況に陥り、30分ほど格闘していました。
どうしても分からずメンターに確認してもらうと、サイドバーの下にヘッダーが表示されていました笑
本日の題名を見た方はもうお気づきかと思いますが、「display: flex;」で簡単に解決しました。（その前にdisplay: inline-block;にしたり、float: right;で無理矢理横に持ってきたり右往左往しましたが汗）
「display: flex;」は以前ネットで見て使ったことはあったのですが、今やっている課題のように、一から自分で骨組みを作っていくことがないと中々覚えられないものですね。

display: frex;の使い方例

下記のようなHAMLで書かれた骨組みがあるとします。

    .wrapper
      .contents1
      .contents2
      .contents3

特にCSSを指定しなければ、ブロック要素のため上から縦順で表示されます。

.contents1
.contents2
.contents3

子要素を横並びにしたい時は、display: flex;を親要素に対して当てます。

    .wrapper {
      display: flex;
    }

すると下記のように（左から右に）横並びになります。
.contents1.contents2.contents3

逆順に表示したい時は下記のように書きます。

    .wrapper {
      display: flex;
      flex-direction: row-reverse;
    }

すると下記のように（右から左に）横並びになります。
.contents3.contents2.contents1

また、調べた中で下記が便利そうな機能だったので、この先使うことになると思いました。
「flex-wrap:」・・・子要素の折り返し

    .wrapper {
      display: flex;
      flex-wrap: wrap;
    }

子要素が親要素を超えてしまった場合、下記のように折り返して複数行に配置してくれます。
.contents1.contents2.contents3.contents4.contents5.contents6
.contents7.contents8.

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

（個人的まとめ）よく使うflexboxの設定 - Qiita

本日覚えたショートカット
option + Backspace
直前の単語を削除

昨日ツイッターであげた疑問に対し、第一線で活躍されている方からアドバイスを頂きました。本当にありがたいですし、自分がどれだけ上に行ったとしても、今の自分と同じような初学者にも手を差し伸べることを忘れないようにします。
（質問内容：「コードブロック左上にファイル名を表示する方法（例```ruby:sample.rb）をネットで見たのだが、同じように書いてもブログ上で表示されないのは何故か？」
に対し、
「Qiita特有の書き方である」と教えてもらいました。）

本日練習問題を通してBEMの命名規約を用いたhaml、scssの書き方を学びました。練習問題は理解できるのですが、自分が一から骨組みを作っていくのは大変ですね、、（本日も10時間以上格闘）
チャットアプリのチャット部分見た目の大枠は作成し、あとは投稿するフォームの見た目作りなので、これ以上時間をかけずに次に進みたいです。