コルク箱

display

ソフトボックスレイアウトを作成するには、まずWebコンテンツをソフトコンテナにバインドします.
つまり、配置するWeb要素がある場合は、その要素を含む親要素を作成し、その親要素をコンテナとして作成する必要があります.この場合、親要素をflexコンテナとして操作するには、displayプロパティを使用してflexboxレイアウトをこのセクションに適用するように指定する必要があります.
ディスプレイのプロパティ値

flex:コンテナ内のflexアイテムを「ブロックレベル要素」に配置します.

in-flex:コンテナ内のflexアイテムを「行内レベル要素」に配置します.

flex-direction

flexコンテナにflexアイテムを配置する主軸と方向を指定するプロパティです.
flex-directionのプロパティ

row:主軸を水平に指定し、左から右に配置します.(デフォルト)

row-reverse:主軸を横方向に指定し、右から左に配置します.

列:主軸を垂直に指定し、上から下に配置します.

列-反転:主軸を垂直に指定し、下から上に配置します.

flex-wrap

flexコンテナの幅より大きいflexアイテムがある場合に改行するかどうかを指定するプロパティです.
flex-wrapのプロパティ

nowrap:flexエントリを1行に表示します.(デフォルト)

wrap:複数行にフレキシブルアイテムを表示します.

wrap-reverse:flexアイテムを複数行に表示します.そしてスタートとゴールを変えます.

flex-flow

flex-flowプロパティは、flex-directionプロパティとflex-wrapプロパティを同時に指定できるプロパティです.デフォルトはrow nowrapです.

<style>
#opt1 {
	flex-direction : row-reverse;
    flex-wrarp : wrap;
}
</style>
=
<style>
#opt1 {
	flex-flow : row-reverse wrap;
}
</style>

justify-content

スケルトン内のベンド項目間の位置合わせを指定します.
videified-コンテンツの属性値

flex-start:主軸の始点に位置決めします.

flex-end:主軸の端点に位置決めします.

center:主軸の中央に配置します.

space-tween:主軸の始点と終点にアイテムを配置し、残りのアイテムをその間に同じ間隔で配置します.

space-aund:すべての項目を同じ間隔で主軸に配置します.

align-items

交差軸(Intersection Axis)を基準として、すべてのベンド項目をソートします.
align-itemsのプロパティ値

flex-start:交差軸の始点に位置決めします.

flex-end:交差軸の端点に位置決めします.

center:交差軸の中央に配置します.

ベースライン:交差軸のテキストベースラインに整列します.

stretch:曲げ項目を増やし、交差軸を満たします.(例えばheight 100 vh)

align-self

[交差軸](Intersection Axis)のみを基準として特定の項目をソートします.
align-sselfのプロパティ値

flex-start:交差軸の始点に位置決めします.

flex-end:交差軸の端点に位置決めします.

center:交差軸の中央に配置します.

ベースライン:交差軸のテキストベースラインに整列します.

stretch:曲げ項目を増やし、交差軸を満たします.(例えばheight 100 vh)

align-content

主軸に改行が行われている場合は、複数行にベンド項目が表示されている場合、align-contentプロパティを使用して、交差軸上のベンド項目間の間隔を指定できます.
align-コンテンツのプロパティ値

flex-start:交差軸の始点に位置決めします.

flex-end:交差軸の端点に位置決めします.

center:交差軸の中央に配置します.

space-tween:交差軸の始点と終点にアイテムを配置し、残りのアイテムをその間に同じ間隔で配置します.

space-aund:すべての項目を交差軸に同じ間隔で配置します.

stretch:曲げ項目を増やし、交差軸を満たします.(例えばheight 100 vh)

플렉스 레이아웃을 활용해 중앙에 표시하는법
<style>
#center {
	display : flex;
    justify-content : center;
    align-items : center;
    min-height : 100vh;
}
</style>

flexスタイルプロパティのalign-items|align-解像度コンテンツ