Flex-box, Float

CSS Flexible Box Layout

1.container
2.item

Container

display : flex, inline-flex

flex-direction:row、column、row-reverse、column-reverse/row-reverseは、行全体を逆順序で並べ替えます.

flex-wrap:nowrap、wrap、wrap-reverse/コンテナにアイテムを1行に配置するのに十分なスペースがない場合、アイテムを改行する方法のプロパティを決定します.
https://studiomeal.com/archives/197

flex-flow:direction、wrapも適用します.

videf-content:flex-start、flex-end、center、space-twon、space-aund、space-andround、space-andround/主軸方向揃え
https://studiomeal.com/archives/197

align-items:stretch、flex-start、flex-end、center、ベースライン/サブ軸方向揃え.ベースラインとテキストベースラインの位置合わせ

justify-content: center;
align-item: center;
-> 정중앙 정렬

align-content : flex-wrap: wrap;この設定では、アイテムの行数が2行を超える場合の垂直軸方向の位置合わせを決定します.

item

order

flex-base:Flexプロジェクトのデフォルトサイズ

を設定する

flex-grow:プロジェクトのflex-base以外の空白部分をflex-growで指定した数値の割合で区分します.

https://studiomeal.com/archives/197

flex-shrink

flex:flexサムネイル.flex-grow、flex-srift、flex-basic順

整列-self:y軸整列

一元的なソート
1. margin: 0 auto;
2. position: relative;
left: 50%
margin-left: -(width/2)px;

float

floatプロパティは、Web開発者がテキスト列にfloat画像を含め、画像の左側右側でテキストを囲む簡単なレイアウトを導入します.これは新聞のレイアウトで見ることができる種類です.-from MDN

3 Dを左、右の値で表示します.同じ線上に箱を置くときに使います.
clear:thisを使用してこの機能を閉じます.慣例に従ってfloatを使用した後、このコードを挿入して終了を示します.

<div class="clearfix"></div>

.clearfix {
    clear: both;
}

floatを使用する際の注意点.
1.画面が縮小すると押し出される現象.
->レイヤーの変形を防ぐには、固定値を持つ親の下で使用する必要があります.
->可変値を与えればいいです.
2.印刷領域は親の高さに影響しません.
3.position 3 D値(fixed,absolute)と一緒に使用できません.
オーバーフローを親に使用すると、親はfloatを適用する子の高さを識別できます.
https://flexbox.help/
https://css-tricks.com/centering-css-complete-guide/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/#ko
https://studiomeal.com/archives/197