【勉強メモ】コーダー目線のSTUDIO覚書2 ～ボックスレイアウトとflexの概念について～

コーディング デザイン
STUDIO リファレンス

前回はこちら

ボックスレイアウトについて

STUDIOは積み木みたいに積み上げていく「ボックスレイアウト」。
コーディングと同じでheader、main、sidebar、footerみたいに要素を重ねて作り上げていく感じ。
無尽蔵に要素を配置していくデザインじゃないからレスポンシブ化しやすい。

Office製品でいうと×パワーポイント 〇自由度の高いWordというイメージ。

STUDIOはボックスレイアウトを採用。パワーポイントのように自由配置ではなく、ワードのように上から積み上げていく形式。

要素の追加

要素はpx、%、auto、flex、が指定可能。縦幅はvhもある。

要素はpxだけでなく%指定ができる。

要素内にさらに要素をドラッグ＆ドロップして配置できる

入れ子親子構造にできる。

<div>
  <div></div>
  <div></div>
  ...
</div>

みたいな感じ。

flexの概念

ボックス内に要素があったり要素をグループ化している場合は矢印アイコンが出現して、それがflexの考え方に沿って配置できる。

flex-direction

divの中に4つのdivがある状態
divの中に4つのdivが入ってる状態

これはflex-direction:column;の状態。

→マークを押すと
→マークを押すと…
flex-direction:rowになる
flex-direction:rowになる！

こんな感じでflexの状態を選択できる！

ギザギザっぽいやじるし
ギザギザっぽいやじるしを押すと改行される

ギザギザの矢印を押すとflex-wrap:wrap;と同じ効果。

STUDIOボタンCSSプロパティ
flex-direction: column-reverse;
flex-direction: column;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: row;
flex-wrap:wrap;

align-items・justify-content

左/上のアイコンを選択するとalign-items・justify-contentの指定ができる。

上と左にあるバーみたいなやつはjustify-contentとalign-items
STUDIOボタンCSSプロパティ
上から順に
・align-items: flex-start;
・align-items: center;
・align-items: flex-end;
・align-items: stretch;？（align-content: space-between;かも？）
上から順に
・justify-content: flex-start;
・justify-content: center;
・justify-content: flex-end;
・justify-content: space-between;
・justify-content: space-around;orjustify-content: space-evenly;？
めちゃくちゃコーディングの考え方にに沿ってデザインできるんだなあ、、すごい

つづくのであった…

SHARE!