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

要素の種類

インライン要素

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

ブロック要素

display: blockが初期指定されている

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

inline-blockを指定すると...

display: inline-block;
それぞれの要素でできなかったことが、可能になる。

• インライン要素に指定した時：width,heightを指定できる、余白の指定がきれいにできる

See the Pen Untitled by 加藤璃子 (@vtdrcdif-the-sasster) on CodePen.

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

See the Pen Untitled by 加藤璃子 (@vtdrcdif-the-sasster) on CodePen.

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

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

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

display: flex;について

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

フレックスボックスレイアウトでできること

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

フレックスモデル

• 要素がflex boxとして配置される時は主軸と交差軸に沿って配置される
• display: flex;が指定されている親要素はflex container
• flex container内でレイアウトされているものはflex item

フレックスボックスのプロパティの逆引き

左から右に横一列のレイアウト

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;関連についてまとめました。解釈が違う部分があれば、教えて頂きたいです

参考にしたもの