TIL - css(css flex)

7279 ワード

TIL CSS Flex テキストリンク

css flex

<div class="container>
	<div class="item">AAA</div>
    <div class="item">BBB</div>
    <div class="item">CCC</div>
</div>

親要因.containerはflex containerと呼ばれます.
サブエレメント.itemはflex itemと呼ばれます.

1.flexコンテナに適用される属性

.container{
	 display: flex;  
    /* display: inline-flex; */
    }

2.配置方向flex-directionの設定

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

row

Flexコンテナの主軸は記事の作成方向と同じです.主軸の始点と終点は内容方向と同じです.

row-reverse

動作はrowと同じですが、始点と終点は反対の位置にあります.

column

Flexコンテナの主軸はブロック軸と同じです.主軸の始点と終点は、「書く」モードの前の点と次の点と同じです.

column-reverse

その挙動はcolumnと同じであるが,始点と終点は逆の位置にある.

3. flex-wrap

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

nowrap

デフォルトでは、flex-item要素がflex-conainer親要素領域にない場合でも、flex-item要素を1行に配置します.始点はflex-directionで決定された方向に適用されます.

wrap

flex-item要素は内部論理で分割され、行にまたがって配置されます.nowrapプロパティと同様に、要素の配置の開始点はflex-directionによって決定されます.通常は上から下への積み重ね順です.

wrap-reverse

wrapプロパティの値と同じですが、リストされている要素の始点と終点の条件は逆です.

4.flex-flow

flex direction、flex wrapのプロパティを同時に設定できます

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

maintaxis(主軸):qualify
cross axis(垂直軸):align

5. justify-content & align-items

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

flex-start

(コンテンツが指定されていない場合に適用される)初期値.この値を指定すると、flexプロジェクトラインのアイテムはflexコンテナの開始線からソートされます.

flex-end

Flexプロジェクトラインの最後のアイテムは、Flexコンテナの終点ラインに位置合わせされます.

center

flexプロジェクトはflexプロジェクトラインの中で中央に位置します.

space-between

柱面方向の使用可能な空間をflexプロジェクト間の空間に均一に割り当てます.

space-around

始点線と終点線とflexプロジェクトとの間の空間も均一に割り当てられるため、始点線と終点線とflexプロジェクトとの間の空間を1に割り当てるとflexプロジェクト間の空間は2に割り当てられる.

space-evenly

指定すると、使用可能なスペースはflexプロジェクト間のスペース、開始線と終了線、flexプロジェクト間のスペースに均一に割り当てられます.

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}