HTML / CSS 覚書 Vol.2 displayプロパティーとflexbox

##1...displayプロパティー基礎
###①インライン要素

• 幅と高さは中の要素分だけ。
• marginは横にしか効かない。段落を変えるとmargin同志の間に少し余白ができる。
• paddingは縦横に効く。縦方向は他の要素を無視して被さる。
• 段落の有無に無関係で横に並ぶ。

###②ブロック要素

• 幅と高さは指定できて、要素は含まない。（要素の高さが50px、指定した高さが50pxの時高さは100pxでなく50pxになる。）
• marginは縦横に効き、他の要素には干渉しない。
• paddingは縦横に効くが中の要素は下方に押し出される。
• 段落の有無に無関係で段落ができる。（横に並ばない。）

###③インラインブロック要素

• CSSで指定する。
• 幅と高さはブロック要素と同じ。
• marginはインライン要素と同じ。
• paddingはブロック要素と同じ。
• 段落はインライン要素と同じ。

こんな感じ。


###④ブロック要素のマージン相殺
ボーダーで囲まれていないブロック要素の上下のmarginは相殺される。
これはインライン要素、インラインブロック要素では起きない。
こんな感じ。

###⑤おまけ・・・切れ目の無い半角文字の要素が中にある時
切れ目の無い半角文字の連続は右横からはみ出してしまう。
適度に切れ目を設けると折れ曲がるが、量が多いと下からはみ出す。
切れ目なく折れ曲がらせるには``word-wrap: break-word;`を指定する。
こんな感じ。

##2...flexbox
###①基本の横並べ

• 横並べにしたい要素の親要素にdisplay: flexを指定する。
• 初期値は左から右に横に並ぶ。（flex-direction: row;の状態）

省略記法：df=>display: flex;
こんな感じ。

###②flex-direction

• 基本の並べる向きと開始位置

省略記法：
fd=>flex-direction +
c=>column
cr=>column-reverse
r=>row
rr=>row-reverse
こんな感じ。

###③横の位置決めjustify-content
省略記法：
jcc=>justify-content: center
jcfs=>justify-content: flex-start
jcfe=>justify-content: flex-end
jcsaro=>justify-content: space-around
jcsb=>justify-content: space-between
こんな感じ。

###④縦の位置決めalign-items
省略記法：
aic=>align-items: center;
aifs=>align-items: flex-start;
aife=>align-items: flex-end;
aic=>align-items: center;
aic=>align-items: center;
こんな感じ。

##⑤カラム落ちさせるflex-wrap
省略記法：fwr=>flex-wrap + w=>wrap
こんな感じ。