[CSS] Flex에 대해 알아보자

Flexbox란

웹 디자인 레이아웃을 간단하고 효율적으로 만들 수 있게 해주는 css3의 레이아웃 모델이다. flex container와 flex item으로 구성된 flexbox는 복잡한 레이아웃 문제를 해결하는데 유용하다.

쉽게 말해 flex item들을 flex container에 담아 레이아웃을 편리하게 도와주는 기술이다. 어떤식으로 사용되는 지는 속성을 살펴보면서 설명하도록 하겠다.

flex 테스트

아래의 코드펜은 " by Gabi (@enxaneta) on CodePen."이 만드신 코드펜인데 프럭스의 개념을 잘담고 있어 실습용으로 링크를 첨부했습니다. (코드펜의 저작권은 코드펜 규정상 출처를 함께 표기하면 사용이 가능하니 참고 바랍니다.)

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

Flex container의 속성

flex container에서 사용되는 속성은 아래와 같으며 하나씩 살펴보도록 하겠다.

display - flex 컨테이너를 설정하는 속성
flex-direction - flex 아이템들의 방향을 결정하는 속성
flex-wrap - flex 아이템들이 컨테이너의 크기를 넘어설 경우 줄바꿈을 할지 결정하는 속성
flex-flow - flex-direction과 flex-wrap을 동시에 설정하는 서식
justify-content - flex 아이템들의 가로축 정렬을 결정하는 속성
align-content - flex 아이템들의 세로축을 하나로 본 정렬
align-items - flex 아이템들의 세로축을 다중으로 본 정렬

display

flex 컨테이너를 설정하는 속성

<!-- flex 컨테이너 생성 -->
<!-- css -->
        .container {
            display: flex;
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        .item {
            width: 60px;
            height: 60px;
            background-color: aqua;
            border: 1px solid black;
        }
        
<!-- html  -->
    <div class="container">
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
        <div class="item">아이템4</div>
        <div class="item">아이템5</div>
    </div>