TIL13. CSS : container에 주는 flex 속성들

📌 이 포스팅에서는 container에 주는 felx 속성들에 대해 알아보겠습니다.

🌈 container에 주는 flex 속성들

🔥 container & item

🔥 main axis & cross axis

🔥 justify & align

1. container & item

🤔 container & item 이란?

✔️ flex 개념에서 container는 요소들을 감싸고 있는 부모이고, item은 요소 내에 포함된 박스들을 의미합니다.
✔️ 이에 flex에서는 container에 적용하는 속성과 item에 적용하는 속성이 있습니다.

🤔 container에 "display : flex;" 를 적용했을 때,,,

✔️ 대표적으로 container에 주는 flex 속성은 "display:flex" 입니다.
✔️ 이 속성을 주면, container 내에 item들이 옆으로 나한히 배치되는 것을 볼 수 있습니다. 마치, block요소가 inline요소가 된 것처럼 가로로 배치되고, 너비를 꽉차게 차지했던 block요소가 자신의 너비만큼만 영역을 차지하고 있습니다.
✔️ 하지만 "display:flex" 속성은 inline 요소와는 다름니다. inline요소는 item 사이의 예상치 못한 틈이있죠!
✔️ float 속성과는 어떤 차이가 있을까요? float 속성은 요소 안에 text의 양 만큼 높이를 가지지만, 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>

🤔 container에 "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>

✔️ 이 밖에 container에 주는 "flex-wrap: wrap"이라는 속성이 있는데, "display:flex"는 item들의 너비의 합이 container의 너비를 초과했을 때 가장 오른쪽의 item이 짤리는 결과가 나타납니다. 이 때, 너비가 부족한만큼 item이 짤리지 않고, 아래로 내려가 배치되길 원한다면 "flex-wrap: wrap"을 container에 적용시켜 해결할 수 있습니다.

2. main axis & cross axis

🤔 flex-direction으로 축을을 교차시킬 수 있습니다.

✔️ main axis는 수평축을 의미하며, cross axis는 main axis의 수직이되는 축을 의미합니다.
✔️ 단, 기본적인 상황에서는 main axis는 가로, cross axis 세로 방향 갖고 있으나, "flex-direction"속성을 통해 축의 방향을 교차시킬 수 있습니다.
✔️ main axis과 cross axis을 교차시키기 위해서 flex-direction 속성을 사용합니다. 이 속성값으로는 "row", "row-reverse", "column", "column-reverse"가 존재합니다.
✔️ display:flex를 적용햇을 때는 flex-direction의 default값은 row이기 때문에 왼쪽에서 오른쪽 방향으로 item이 정렬되는 것이고, 이 방향에서 itme을 역방향으로 배치하고 싶을 땐 reverse를 추가합니다.
✔️ 또한 축을 교차시켜, 세로 방향으로 정렬하고 싶을 때는 flex-direction의 column-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

🤔 justify & align 이란?

✔️ main axis 기준으로 item 정렬의 영향을 주는 것이 justify이고, cross axis 기준으로 item들의 영햐을 미치는 것이 align입니다.
✔️ flex-direction의 옵션 값에 따라 이 방향은 변경되기 때문에 축을 기준으로 이해해야합니다.

🤔 justfy content 속성

✔️ justfy content는 "flex-start", "flext-end", "center", "space-between", "space-around", "space-evenly" 등의 속성 값을 가짐니다.
✔️ 이 중 기본값은 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는 main axis와 교체되는 축, 즉 수직축에 대한 정렬 속성입니다. flex-direction이 column이라면 수평축(가로)에 적용됩니다.
✔️ align-items의 기본값은 "stretch"이고, "flex-start", "flex-end", "center", "baseline" 속성값이 존재합니다.
✔️ stretch가 기본값이기 때문에 align-items 속성을 주지 않았을 때는 모든 item이 같은 높이를 가지게 되고, baseline 속성값은 Text Line을 기준으로 정렬시켜줍니다.

<!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>

Author And Source

이 문제에 관하여(TIL13. CSS : container에 주는 flex 속성들), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jewon119/TIL00.-CSS-container에-주는-flex-속성들

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)