CSS에서 flex-wrap 속성에 nowrap 값을 사용하면 플렉스 컨테이너 안의 아이템들이 줄바꿈되지 않고 한 줄로 배치됩니다. 이는 flex-wrap 속성의 기본값이기도 합니다.
nowrap 값의 동작 원리
flex-wrap: nowrap;이 적용되면 플렉스 아이템들은 컨테이너의 너비가 부족하더라도 새로운 줄로 넘어가지 않습니다. 대신 각 아이템의 크기가 자동으로 축소되면서 한 줄 안에 모두 표시됩니다.
반대로 wrap 값을 사용하면 공간이 부족할 때 아이템이 다음 줄로 넘어가게 됩니다. 화면 크기에 따라 레이아웃을 유연하게 조정해야 하는 경우라면 wrap을, 항상 한 줄을 유지해야 하는 경우라면 nowrap을 선택하는 것이 좋습니다.
예제 코드
아래 코드는 nowrap 값을 실제로 구현한 예제입니다. 9개의 퀴즈 아이템(Q1~Q9)이 주황색 컨테이너 안에서 한 줄로 나란히 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
flex-wrap: nowrap;
}
.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>Q7</div>
<div>Q8</div>
<div>Q9</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 흰색 배경의 9개 아이템이 주황색 컨테이너 내부에서 가로 한 줄로 정렬된 것을 확인할 수 있습니다. 컨테이너 너비를 줄여도 아이템이 두 번째 줄로 넘어가지 않고, 대신 각 아이템의 폭이 줄어들며 한 줄 상태를 유지합니다. 이것이 바로 nowrap 값의 핵심 역할입니다.