CSS Flexbox를 사용하려면 먼저 플렉스 컨테이너(flex container)를 정의하고, 그 안에 플렉스 아이템(flex items)을 배치하면 됩니다.
컨테이너가 될 요소에 display: flex; 속성을 지정하면 해당 요소가 플렉스 컨테이너로 변환되며, 그 직계 자식 요소들은 자동으로 플렉스 아이템이 됩니다. 별도의 추가 설정 없이도 아이템들이 가로 방향으로 나란히 정렬되는 것이 Flexbox의 핵심 동작 방식입니다.
Flexbox 구현 예제
아래 예제 코드를 직접 실행해 보면 Flexbox 요소를 구현하는 방법을 쉽게 이해할 수 있습니다. 여기서 Q1부터 Q6까지의 div 요소들이 각각 플렉스 아이템에 해당하며, 주황색 배경의 전체 영역이 플렉스 컨테이너(Flexbox 요소)입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>
코드 설명
.mycontainer클래스에display: flex;를 적용하여 플렉스 컨테이너를 생성했습니다..mycontainer > div선택자를 사용해 컨테이너의 직계 자식 div들을 플렉스 아이템으로 스타일링했습니다.- 각 아이템은 흰색 배경, 중앙 정렬 텍스트, 100px 너비와 5px 마진을 가져 시각적으로 구분됩니다.
- 플렉스 아이템들은 기본값인
flex-direction: row에 따라 가로 방향으로 순서대로 배치됩니다.
이처럼 Flexbox를 활용하면 복잡한 float나 position 설정 없이도 요소를 유연하고 깔끔하게 배치할 수 있습니다.