webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

display: flex; 現時点でまとめる。

カラム落ちを前提にするならば、float

  • 見出しのとおり、カラム落ちさせるならば、floatを使う
  • そうでないときは、display: flexが便利。
  • ナビゲーションなど。

まず並べる  display

  • div id="flexBox" に、display: flex;
  • 「横」に並べるには、flex-direction: row;
  • 「縦」並べるには、flex-direction: column;
  • メディアクエリーに使えそうです。

改行 wrap

  • 一直線に並ぶから、flexBoxにwidthを設定して、
  • 折り返すように、flex-wrap: wrap;、を記述する。
  • wrap、とは「改行」のこと。「改行します」と、指定する。

横の空き

  • そして、それぞれの要素の間隔を決める。
  • justify-content: space-between; 要素の間にスペースを均等に付ける。
  • justify-content: space-around; 要素の周りにマージンがあるイメージ。左右両サイドの空きは、要素間の空きの半分になる。
  • まだまだいろいろできるみたいです。必要に応じて調べてみたいです。