Flex 레이아웃 1
Flexbox는 레고 블록과 같습니다.
레고 블록을 쌓아서 원하는 모양을 만들 수 있듯이, Flexbox를 사용하면 웹 페이지의 요소들을 쌓아서 원하는 모양의 웹 페이지를 만들 수 있습니다.
이전에는 콘텐츠를 상하좌우 또는 중앙 정렬할 때 복잡한 CSS 규칙을 사용해야 했지만, Flexbox를 사용하면 간단하게 요소를 정렬할 수 있습니다.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Flex 컨테이너 & Flex 아이템
Flexbox 내에서 요소들을 감싸고 있는 박스를 Flex Container
, 박스 내 요소들은 Flex Item이라고 합니다.
-
Flex Container
: Flexbox 레이아웃을 적용할 부모 요소로, 여기에 속한 자식 요소들을 Flex Item이라고 부릅니다. -
Flex Item
: Flex Container 내부의 각각의 요소로, 이 요소들은 Container의 속성에 따라 정렬되거나 배치됩니다.
Flexbox 사용법
.container {
display: flex;
}
위와 같이 CSS에 display: flex;
속성을 추가하면 해당 요소는 Flex Container가 되며, 그 안에 있는 모든 자식 요소들은 자동으로 Flex Item이 됩니다.
Flexbox 주요 속성
1. display: flex;
Flex Container를 정의하는 속성으로, flex 속성을 적용하면 컨테이너 내 자식 요소들이 Flex Item이 됩니다.
.container {
display: flex;
}
2. flex-direction
Flex Item들이 배치될 방향을 정의합니다. row
로 설정하면 가로 방향, column
으로 설정하면 세로 방향으로 Flex Item들이 배치됩니다.
.container {
flex-direction: row; /* 혹은 column */
}
3. flex-wrap
Flex Container 내 Flex Item들이 한 줄에 배치되게 할 것인지, 또는 필요하다면 여러 줄에 걸쳐 배치되게 할 것인지를 정의합니다.
flex-wrap: nowrap;
으로 설정하면 Flex Item들은 무조건 한 줄에 배치되며, flex-wrap: wrap;
으로 설정하면 부모의 너비를 넘어간 Flex Item을 새로운 줄에 배치합니다.
.container {
flex-wrap: nowrap; /* flex item들을 한 줄에 배치 */
}
실습
Flexbox 레이아웃을 간단하게 구현한 코드는 아래와 같습니다.
<div class="flex-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.flex-container {
display: flex;
gap: 20px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}
.box {
padding: 30px;
font-weight: bold;
font-size: 20px;
text-align: center;
background-color: #c8e6c9;
border-radius: 5px;
}
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!