CSS Flex

8151 ワード
CSS Flex テキストリンク
ネットを勉強しているときはGridとFlexしか知らないようなので、復習記事を書きたいです.

Flex


まず、flexがレイアウトを作成するために使用するHTML構造は次のとおりです.
<div class="container">
	<div class="item A">A</div>
	<div class="item B">B</div>
	<div class="item C">C</div>
</div>
.container=Flex Container(親)
.item=Flex Item(子)
親エレメントコンテナはFlexの影響を受け、設定された属性に従って子エレメントItemを配置します.
. container {
	display: flex;
}
Flexはcontainerに適用される属性/itemの属性に分けられる

Containerに適用される属性


⏹ Display: flex

.container {
	display: flex;
	/* display: inline-flex; */
}
ディスプレイをflexに適用するとcontentのサイズと同じようにwidthとheightがあります




Flexには2種類の軸印があります

主軸主軸Axis
これらの項目を置く方向を軸とする
主軸に垂直な軸を交差軸CrossAxisと呼ぶ

デフォルトはrowです.


⏹ Flex-direction


中心軸の設定方法

.container {
 	flex-direction: row  기본값
    /*  flex-direction: row-reverse */
    /*  flex-direction: column */
    /*  flex-direction: column-reverse */
}

hooks-usState()の使用
Java同時メモ(14)----ブロックキュー