[css]Flex아이템 li 요소 4개씩 한 줄에 배치하기

 

 

 

웹 개발 시 리스트(ul, li) 요소를 사용해 메뉴나 갤러리 등을 구성할 때,

Flexbox를 이용하면 손쉽게 원하는 레이아웃을 만들 수 있습니다.

이번 글에서는 ul 안의 li 요소를 4개씩 한 줄에 배치하는 방법을 알아보겠습니다.

 

1. 기본 Flexbox 설정

ul.news {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

이렇게 하면 li 요소들이 가로로 일렬로 배치됩니다. 

2. li 요소 4개씩 한 줄에 배치하기(모바일에서는 2개씩 배치) 

li 요소를 4개씩 한 줄에 배치하려면, 각 li 요소의 너비를 25%로 설정합니다.

이는 한 줄을 네 등분해서 li 요소들이 균등하게 배치되도록 하기 위함입니다.

ul.news li {
    width: 25%; /* 각 li 요소의 너비를 25%로 설정 */
    box-sizing: border-box; /* padding과 border가 포함되도록 설정 */
}

@media (max-width: 600px) {
    ul.news li {
        width: 50%; /* 한 줄에 2개씩 배치 */
    }
}

모바일 환경을 위한 미디어 쿼리를 추가하여 화면 너비가 줄어들 때 li 요소가 2개씩 한 줄에 보이도록 조정합니다. 예를 들어, 화면 너비가 600px 이하일 때 li 요소의 너비를 50%로 변경합니다.

3. Flexbox 줄 바꿈 설정 (flex-wrap)

만약 화면 크기에 따라 li 요소가 줄 바꿈 없이 좁아지는 것이 아니라, 자동으로 다음 줄로 넘어가게 하고 싶다면 ul 요소에 flex-wrap: wrap; 속성을 추가합니다.

ul.news {
    display: flex;
    flex-wrap: wrap; /* 요소들이 화면 너비에 맞게 줄 바꿈이 되도록 설정 */
    padding: 0;
    margin: 0;
    list-style: none;
}

4. 정리

• flex-wrap: wrap;을 설정하지 않으면 li 요소들이 한 줄에 모두 배치되려 하기 때문에 각 요소의 크기가 줄어들 수 있습니다.
• 각 li 요소의 너비를 25%로 설정해 한 줄에 4개씩 배치합니다.
• 미디어 쿼리를 사용하여 모바일에서는 2개씩 한 줄에 깔끔하게 배치됩니다. 

이 간단한 방법으로 li 요소들을 깔끔하게 정렬하여 다양한 레이아웃을 손쉽게 구현할 수 있습니다.