css要素の復習 - ruhachiimekaのブログ

ブロック要素とインライン要素　ついでに　インラインブロック要素

ブロック要素

などがある。

インライン要素

などがある。

それぞれの特徴としては

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

　ブロック同士縦に並ぶ。　　　　　　　　インライン要素同士横に並ぶ。

　横幅や高さを指定できる。　　　　　　　横幅や高さを指定できない。

　余白を指定できる。　　　　　　　　　　余白を指定できない。

　　　　　　　　　　　　　　　　　　　（img、input、textareaの一部は指定できる。）

インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てきたときにCSSで「display」を利用できます。

display:inline; インライン要素にする

display:block;　ブロック要素にする

display:inline-block;　インラインブロック要素にする

display:none;　指定した要素を非表示にする

display:flex; 柔軟に横並びにさせたり、高さを調整できたりする。

↑このフレックスボックスについて説明をする。

Flexboxを使用する場合には、HTMLファイルにまず親要素となるコンテナ（f-container）を作成し、その中に子要素となるアイテム（f-item）を作ります。

※なので、display:flex;はコンテナー要素にしか指定できない。

この親要素に指定できるプロパティは、、

flex-directionアイテムの並び順を指定する

flex-wrapアイテムの折り返しを指定する

flex-flowアイテムの並び順と折り返しを一括で指定するj

ustify-contentアイテムの水平方向の位置を指定する

align-itemsアイテムの垂直方向の位置を指定する

align-contentアイテムの行の垂直方向の位置を指定する

子要素に指定できるプロパティは、、、

orderアイテムの並び順を指定

flex-growアイテムの伸び率を指定

flex-shrinkアイテムの縮み率を指定

flex-basisアイテムのベースの幅を指定

flexアイテムの伸び率、縮み率、ベースの幅を一括指定align-selfアイテムの垂直方向の位置を指定

このプロパティたちは貼っつけただけなので、全て理解していません！！

おいおい理解していく感じでいいでしょうか？

justify-content とは

コンテナ内の主軸方向の揃え位置を指定する。（初期値では横方向になってる。）

　コンテナー要素がフレックス指定されているときに使える。

コンテナ内のアイテムの並ぶ方向（主軸方向）が横方向になるか縦方向になるかは、 flex-directionプロパティの値によって変化します。

flex-directionプロパティの初期値は row（横方向）ですから、flex-directionプロパティの値を特に指定しない場合には、フレックスコンテナの主軸は横方向（左から右、正確に言うと現在のインライン軸の方向と同じ）になります。

(flex-direction:column;だったら縦になる。）

flex-start 行頭寄せ、通常は左揃え（初期値）

flex-end 行末寄せ、通常は右揃え

center センター揃え

space-between アイテムの間にスペースを均等に割り付けspace-aroundアイテムの両端 ↓　　　にスペースを均等に割り付け

(フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。space-betweenと異なり、起点・終点との間にも間隔が生じます。余白がないときは、centerと同じになります。)