CSS Position & Float & Flexbox

容器を位置決めする方法では、位置、Float、Flexboxを見てみましょう.
Position
CSSでは、top、left、right、bottom、top-left、top-right、bottom-left、bottom-rightを使用してボックスの位置を変更できます.しかし、リストされているものだけではコンテナの位置を変えることはできません.
Staticposition: staticpositionプロパティのデフォルト値はstaticです.
静的とはhtmlで定義された順序でブラウザに表示されることを意味します.
relative

.container {
    left: 20px;
    top: 20px;
    position: relative;
}

位置を相対に変更すると、上部と左側から20 px移動したと判断できます.
相対的な意味は、元(静止しているとき)にあったはずの位置から20 px相対的に移動することである.
absolute

.container {
    left: 20px;
    top: 20px;
    position: absolute;
}

absolute私の品物が入っている箱の中を基準にします.
つまり、親Ellimentの内容を起点に移動します.
fixed

.container {
    left: 20px;
    top: 20px;
    position: fixed;
}

fixed親の礼儀を考えずにwindowを起点とすること.
sticky

.container {
    left: 20px;
    top: 20px;
    position: sticky;
}

元の位置(静的時)にありますが、スクロールしても元の位置に付着することを意味します.
Float
floatの最初の目的は、画像とテキストをどのように配置するかです.

float: left

画像は左側、テキスト折り返し画像は左側

float: center

画像が中央になり、テキストが残りの左右の空間に置かれる

float: right

画像は右側に、テキストは左側余剰スペース

Flexbox
Felxboxを使用すると、箱やアイテムを行や列で自由に置くことができます.
以前は、すべてのブラウザが互換性を持つように、Position、float、Tableを使用してレイアウトを作成していました.しかし、複雑すぎて、内容にかかわらず、同じサイズのボックスにアイテムを配置し、親コンテンツの内部に垂直に水平に位置合わせするのは複雑です.flexboxで快適になりました.
Flexboxの重要な概念

flexboxにはコンテナ(ボックス)に適用される属性値が存在し、各項目にはその属性に適用される値がある.

flex boxには、中心軸とは反対の軸があります.中心軸を水平に配置するか垂直に配置するかで、別の軸が変わります.

Containerに適用される属性

display : flex

コンテナdisplayプロパティにflex値を指定すると、コンテナはflexboxになります.

flex-direction: row

flex-directionのデフォルト値はrowです.row左->右へ.

値row-reverse右->左方向に物品を充填する.

値column中心軸を上から下に切り替えます.

値column-reverse下向き->上向きに物を充填します.

flex-wrap: nowrap

デフォルトはnowrapです.Nowrapは、品物がいくらあっても、品物が小さくなるにつれて一線に貼られます.

値wrapは、私たちが指定した品物の大きさで1行を埋め、1行を超えると次の行に移動します.したがって、ビューポートのサイズが変更されると、自動的にジャンプします.

値wrap-reverse包装を下から上にすることができる.

flex-flow

flex-flowはflex-directionとflex-wrapを組み合わせたものです.

flex-flow: column nowrapフォーマット.

justify-content: flex-start(ソート)

中心軸に物品を配置する方法を定義します.容器のどこに貼るかではなく、物の並び順を決定します

デフォルトはflex-startです.水平軸が中心軸の場合は「左」に物品を貼り付け、垂直軸が中心軸の場合は「上」から物品を貼り付けます.

値flex-end水平軸が中心軸であれば「右側」に物品を貼り付け、垂直軸が中心軸であれば「下」に物品を貼り付ける.

値space-around物品空間を付与する.水平軸が中心軸であれば、空間を左右に移動し、最末端の要素は中間の要素よりも少ない空間を消費します.(それらの間の距離は、周囲の要素が持つ空間と自己の空間の合計と同じです.)

値space-evenly均一空間

値space-between末尾の要素は容器に密着し、中間の要素間隔を均一にする.

align-items:

反対軸に配置項目を定義

値centerflexboxの反対軸の中央に配置します.

値baselineは、Flexboxの反対軸の大きさを占める最大項目の中心と、他の要素の中心とを同じ線上に配置したものです.

align-content:

prevident-contentは同じ値を持ち、反対の軸にアイテムを配置する方法を定義します.

align-contentは複数行のflexboxのために設計されており、プロジェクトが1行にある場合は効果はありません.

align-contentは行間隔を決定し、align-itemsはコンテナ内のアイテム全体のソート方法を決定します.

itemに適用されるプロパティ

order:0

デフォルトは0です.0の場合、htmlで定義された順序でflexboxに渡されます.手順に従って移行すると、flexboxが上から下へ、右から左への移行を決定します.

値を数値に変更すると、flexboxに渡される順序が変更されます.

ほとんど使われていません.

flex-grow: 0

flex-growライトしない場合、デフォルト値は「0」です.指定した要素の幅と高さを維持します.コンテナがどんなに大きくなっても、そのままで、コンテナが小さくなれば、均一に小さくならざるを得ない.

flexboxの空き領域を埋めるために追加されるアイテムflex-grow:1を与える.

複数の物品flex-grow:1に与えられ、Flexboxの残りの空間はその物品の均一な増加に伴って満たされる.

一つの道具flex-grow:2もう一つの道具flex-grow:1をあげると、すべての道具はflexboxの残りの空間を埋めたいのですが、「2」をあげる道具は「1」をあげる道具より2倍大きいです.

flex-shrink:0

コンテナが小さくなる動作を指定します.デフォルトは0です.

すべての品物flex-shrink:1で、大きさは均一です.

一つの物品にflex-shrink:2他の要素にflex-shrink:12の物品は1の物品より1/2小さい.

flex-basis: auto

物品がどれだけのスペースを占有するかを定義します.デフォルト値は、flex-growおよびflex-shrinkで定義された方法で自動的に移動します.

flex-basis: 60%%を指定すると、容器の大きさは容器の大きさの60%に維持されます.

align-self

コンテナレベルではなく、アイテムレベルのソートです.Flexboxを垂直に整列させたい場合にのみ使用できるアイテムは1つだけです.

align-self:center,この属性を与えられたものだけが容器の反対軸の中央に位置する.

height: 100% vs height: 100vh
「%」は、容器を含む親の高さを100%充填することを意味する.
コンテナは100%も現れません.bodyのheightsは指定されていないからです.指定bodyも現れません.bodyの親htmlのheightが指定されていないためです.bodyとhtmlが100%の場合、ビューポートの高さはベージュに変更されます.
つまり、「100 vh」は親に関係なく、ビューポートの表示高さの100%です.