【HTML / CSS】要素の種類整理＋display:flex;について

## 要素の種類

#### インライン要素
- `display: inline`が初期指定されている
- 主に文章の一部の要素
- 要素の例
    - < a >,< span >,< strong >,< em >など
- 特徴
    - 要素の前後で改行されない（水平に配置される）
 :speech_balloon:FigmaだとwidthをHugに指定した時みたいだな〜
- できないこと🙅‍♀️
    - width,height、上下のmarginの指定ができない
    - paddingをつけると他の要素と重なってしまう


#### ブロック要素
 `display: block`が初期指定されている
- 要素の例
    - < div >,< p >,< h1 > 〜 < h6 >など
- 特徴
    - 要素の前後に改行される（垂直に積み重ねられる）
:speech_balloon:FigmaだとwidthをFillに指定した時みたいだな〜
- できること🙆‍♀️
    - width,heightの指定ができる
- できないこと🙅‍♀️
    -  `text-align`（横方向の揃え位置の指定）,`vertical-align`（縦方向の揃え位置の指定）ができない


### `inline-block`を指定すると...
`display: inline-block;`
それぞれの要素でできなかったことが、可能になる。
- インライン要素に指定した時：width,heightを指定できる、余白の指定がきれいにできる
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjQdwbb" data-pen-title="Untitled" data-user="vtdrcdif-the-sasster" 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/vtdrcdif-the-sasster/pen/JjQdwbb">
  Untitled</a> by 加藤璃子 (<a href="https://codepen.io/vtdrcdif-the-sasster">@vtdrcdif-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- ブロック要素に指定した時：横並びにすることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BagNvoP" data-pen-title="Untitled" data-user="vtdrcdif-the-sasster" 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/vtdrcdif-the-sasster/pen/BagNvoP">
  Untitled</a> by 加藤璃子 (<a href="https://codepen.io/vtdrcdif-the-sasster">@vtdrcdif-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



### その他、`display:~~~~;`の指定

- `display: none;`
    - 指定した要素はブラウザ上で非表示になる
- `display: flex;`
    - 親要素に対して子要素を横並びにする
    - 入りきらなければ折り返す
    - :bulb:横に並べる＝一次元のイメージ
- `display: grid;`
    - グリッド（格子）状に縦・横にブロックを並べる
    - :bulb:縦・横に並べる＝二次元のイメージ

このほかにもあるので、以下参考にする

https://developer.mozilla.org/en-US/docs/Web/CSS/display?v=example


## `display: flex;`について
`display: flex;`はフレックスモデルに従って、レイアウトをする

### フレックスボックスレイアウトでできること
- コンテンツのブロックを親要素の中で上下中央に配置すること
- 全ての子要素が利用できる幅・高さを等しくすること
- 段組のレイアウトで全ての段の高さが同じようにすること

### フレックスモデル
- 要素がflex boxとして配置される時は<strong>主軸と交差軸</strong>に沿って配置される
- `display: flex;`が指定されている親要素は<strong>flex container</strong>
- flex container内でレイアウトされているものは<strong>flex item</strong>

### フレックスボックスのプロパティの逆引き
##### 左から右に横一列のレイアウト
`flex-direction: row;`（初期の設定）


##### 縦一列のレイアウト
`flex-direction: column;`（CSSを追加する前と同じ）

##### 親要素の幅・高さによって、折り返しするレイアウト
`flex-wrap: wrap;`

##### 水平方向に揃えたい
`justify-content: ○○;`
〇〇の部分
- `flex-start`：左揃え
- `flex-end`：右揃え 
- `center`：中央揃え
- `space-between`：最初と最後の子要素を両端、残りは均等に配置
- `space-around`：全て均等に間隔をあけて配置

複数行の時は`align-content: ○○;`

##### 垂直方向に揃えたい
`align-items: ○○;`
〇〇の部分
- `stretch`：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて配置
    - 高さに合わせて要素が伸びる
- `flex-start`：上揃え
- `flex-end`：下揃え 
- `center`：中央揃え
- `baceline`：テキストのベースラインで配置



## まとめ
Progateの空で再現するレッスンの際に、中央揃えの仕方を調べた時に種類ありすぎてこんがらがったので、一旦要素についてとよく使う`display:flex;`関連についてまとめました。解釈が違う部分があれば、教えて頂きたいです :memo:









## 参考にしたもの
https://qiita.com/miyaji_m/items/81e18aa587996332b80f

https://qiita.com/shimada_slj/items/a5595bb314542167b2f5#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

https://saruwakakun.com/html-css/basic/display

https://developer.mozilla.org/en-US/docs/Web/CSS/display?v=example

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox

https://fastcoding.jp/blog/all/info/css-flexbox2/#no2-4