flexbox練習サイト：https://flexboxfroggy.com/#ja Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com css練習ツール：https://jsbin.com/ JS Bin Sample of the bin: jsbin.com デザインガイドサイト：https://material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io マー..

Flexboxは、 コンテナ（親要素） アイテム（子要素） 上記2つの要素によって構成されている。 コンテナ（親要素、f-container）に使用できるプロパティ flex-direction アイテムの並び順を指定する row（デフォルト）：アイテムを水平方向に左から右へと配置 row-reverse：アイテムを水平方向に右から左へと配置 column：アイテムを垂直方向に上から下へと配置 colmn-reverse：アイテムを垂直方向に下から上へと配置 flex-wrap アイテムの折り返しを指定する nowrap（デフォルト）：アイテムを折り返さずに一列に配置 wrap：複数行のアイテムを上から下へと配置 wrap-reverse：複数行のアイテムを下から上へと配置 flex-flow アイテムの並び順と折り返しを一括で指定する .f-container{ flex-flow:..

positionとは、ボックスの配置方法（基準位置）を指定するプロパティ。 実際に表示位置を指定するためには、top、right、bottom、leftプロパティを併用して、基準位置からの距離を指定する必要がある。 以下の値で指定できる。 static static特に配置方法を指定せず、通常の位置に配置する（初期値）。 この値の場合はtop、bottom、left、rightを併用しない。 relative 通常の位置を基準とした、相対位置への配置を指定する。 absolute 包含ブロック（直近の祖先要素でポジショニングされた要素、もしくはウインドウの内容領域）を基準とした、絶対位置への配置を指定する Fixed ウインドウを基準とした絶対位置への配置を指定する。 absoluteと異なり、スクロールしても同じ位置に固定する。 sticky ある位置に来るスクロールと共に動く。 ウ..

displayとは要素の表示形式を指定するプロパティ。 以下の値で指定できる。 block inline inline-block width/height ○ X ○ margin/padding ○ 左右のみ○ ○ 並び方 縦並び 横並び 横並び 要素 p、div、ul、h1〜h6など a、span、imgなど