TIL13. CSS:コンテナのFlex属性

56408 ワード

CSS テキストリンク

📌 本稿ではcontainerへのfelxプロパティについて説明します.

🌈 コンテナのflexプロパティ

🔥 container & item

🔥 main axis & cross axis

🔥 justify & align

1. container & item

🤔 container&itemとは?

✔flexコンセプトではcontainerは要素の親であり、itemは要素に含まれるボックスです.
✔の場合、flexにはcontainerに適用される属性とitemに適用される属性があります.

🤔 コンテナ内の「display:flex;」適用時、

代表的なのは、コンテナのflexプロパティが「display:flex」です.
✔¥ААААААААААААААblock要素がinline要素になるように、水平に配置されたblock要素は幅の一部にすぎません.
✔ただし、「display:flex」属性はinline要素とは異なります.inline要素はitemの間に意図的に思わなかった隙間があります!
1000 float属性と何の違いがありますか?floatプロパティには、要素内のテキスト量と同じ高さがありますが、flexは自動的に同じ高さを調整します.

<!DOCTYPE html>
<html>
<head>
	<title>Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
	.flex-container {
		background: lightgray;
		display: flex; // 👈 display:felx 적용
	}
	.flex-item {
		padding: 10px;
		border: 3px solid tomato;
		color: white;
		background: #00675b;
	}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores minus nobis laborum, necessitatibus porro labore enim modi consectetur eum? A perspiciatis architecto voluptas placeat! Soluta dolorum sint quaerat? Nostrum.
</body>
</html>

🤔 コンテナの「display:inline-flex;」適用時、

✔inline-flexを適用すると、下のinline要素が存在する場合、上にスライドします.

<!DOCTYPE html>
<html>
<head>
	<title>Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
	.flex-container {
		background: lightgray;
		display: inline-flex;
	}
	.flex-item {
		padding: 10px;
		border: 3px solid tomato;
		color: white;
		background: #00675b;
	}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores minus nobis laborum, necessitatibus porro labore enim modi consectetur eum? A perspiciatis architecto voluptas placeat! Soluta dolorum sint quaerat? Nostrum.
</body>
</html>

✔¥ААААААААААААААААААААこの場合、アイテムを幅不足で切断せずに下に配置する場合は、flex-wrap:wrapをコンテナに適用して解決できます.

2. main axis & cross axis

🤔 flex-軸を方向に交差させます。

ААААААААААААААААА
ААААААААААААААААА
flex-directionアトリビュートを使用して、主軸と十字軸を交差させます.このプロパティの値には、row、row-reverse、column、column-reverseが含まれます.
✔display:flexを適用する場合、flex-directionのデフォルト値はrowであるため、アイテムは左から右に揃えられ、その方向にitmeを逆方向に配置したい場合はreverseを追加します.
✔

<!DOCTYPE html>
<html>
<head>
	<title>Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
	.flex-container {
		background: lightgray;
		display: flex;
	}
	.row{
		flex-direction: row;
	}
	.row-reverse{
		flex-direction: row-reverse;
	}
	.column{
		flex-direction: column;
	}
	.column-reverse{
		flex-direction: column-reverse;
	}
	.flex-item {
		padding: 10px;
		border: 3px solid tomato;
		color: white;
		background: #00675b;
	}
	</style>
</head>
<body>
	<div class="flex-container row">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores minus nobis laborum, necessitatibus porro labore enim modi consectetur eum? A perspiciatis architecto voluptas placeat! Soluta dolorum sint quaerat? Nostrum.
	<div class="flex-container row-reverse">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores minus nobis laborum, necessitatibus porro labore enim modi consectetur eum? A perspiciatis architecto voluptas placeat! Soluta dolorum sint quaerat? Nostrum.
	<div class="flex-container column">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores minus nobis laborum, necessitatibus porro labore enim modi consectetur eum? A perspiciatis architecto voluptas placeat! Soluta dolorum sint quaerat? Nostrum.
	<div class="flex-container column-reverse">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores minus nobis laborum, necessitatibus porro labore enim modi consectetur eum? A perspiciatis architecto voluptas placeat! Soluta dolorum sint quaerat? Nostrum.
</body>
</html>

3. justify & align

🤔 合理化&整列とは?

ААААААААААААААААААА
✔flex-directionのオプション値はこの方向を変更しますので、軸を理解する必要があります.

🤔 justfyコンテンツプロパティ

✔justfy contentには、「flex-start」、「flext-end」、「center」、「space-tween」、「space-andround」、「space-quality」などの属性値があります.
デフォルトはflex-startです.したがって、flex-directionまたはデフォルト値rowがない場合はitemを左から右に、felx-directionがcolumnの場合はitemを上から下に揃えます.

<!DOCTYPE html>
<html>
<head>
	<title>Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
	.flex-container {
		height: 200px;
		padding: 10px;
		margin: 10px;
		background: lightgray;
		display: flex;
	}
	.row-flex-start{
		flex-direction: row;
		justify-content: flex-start;
	}
	.row-center{
		flex-direction: row;
		justify-content: center;
	}
	.column-flex-start{
		flex-direction: column;
		justify-content: flex-start;
	}
	.column-center{
		flex-direction: column;
		justify-content: center;
	}
	.flex-item {
		padding: 10px;
		border: 3px solid tomato;
		color: white;
		background: #00675b;
	}
	</style>
</head>
<body>
	<div class="flex-container row-flex-start">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	<div class="flex-container row-center">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	<div class="flex-container column-flex-start">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	<div class="flex-container column-center">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
</body>
</html>

🤔 align-itemsプロパティ

✔align-itemsは、主軸に置き換える軸、すなわち垂直軸の位置合わせ属性です.flex-directionがcolumnの場合、水平軸(水平)に適用されます.
✔allign-itemsのデフォルト値は「stretch」で、「flex-start」、「flex-end」、「center」、「baseline」の属性値があります.
✔stretchはデフォルト値ですので、align-items属性が指定されていない場合は、すべての項目が同じ高さになり、ベースライン属性値はテキスト行に揃えられます.

<!DOCTYPE html>
<html>
<head>
	<title>Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
	.flex-container {
		height: 200px;
		padding: 10px;
		margin: 10px;
		background: lightgray;
		display: flex;
	}
	.flex-start{
		align-items: flex-start;
	}
	.flex-end{
		align-items: flex-end;
	}
	.center{
		align-items: center;
	}
	.baseline{
		align-items: baseline;
	}
	.flex-item {
		padding: 10px;
		border: 3px solid tomato;
		color: white;
		background: #00675b;
	}
	</style>
</head>
<body>
	<div class="flex-container flex-start">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	<div class="flex-container flex-end">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	<div class="flex-container center">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
	<div class="flex-container baseline">
		<div class="flex-item">item1/item1/item1/item1/item1</div>
		<div class="flex-item">item2/item2</div>
		<div class="flex-item">item3/item3/item3/item3/item3/item3/item3/item3</div>
	</div>
</body>
</html>

Reference

この問題について(TIL13. CSS:コンテナのFlex属性), 我々は、より多くの情報をここで見つけました https://velog.io/@jewon119/TIL00.-CSS-container에-주는-flex-속성들

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ランダム文字列生成

React|ステータス管理:Redux