flex #
Find similar titles

Structured data

Category: Etc

Flex란?

Flex란? #

flex는 웹페이지의 레이아웃을 잡을 때 사용하는 CSS 속성으로, 레이아웃을 잡을 때 보통 display, float, position과 같은 속성을 이용한다. 하지만 이러한 속성들로 레이아웃을 구현하는 게 복잡하고 어려울 때가 있다. 그 한계를 극복하기 위해 CSS3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치기능에 중점을 맞추어 고안되었기 때문에 기존의 방식들보다 훨씬 더 수월하게 퍼블리싱이 가능하다.

기본문법 #

display:flex; #

컨테이너에 display: flex;를 적용하는 것이 시작이다. 이 한 줄의 CSS만으로 아이템들은 기본적으로 아래 그림과 같이 배치된다.

block
display: block;

flex
display: flex;

flex 아이템들은 가로 방향으로 배치되고, inline 요소들처럼 자신이 가진 content의 width만큼만 차지하게 된다. height는 컨테이너의 높이만큼 늘어난다.

flex-direction(배치 방향 설정) #

아이템들이 배치되는 축의 방향을 결정하는 속성이다. 가로, 세로, 역방향으로 정할 수 있다.

row (기본값)
flex-direction: row;

row-reverse
flex-direction: row-reverse;

column
flex-direction: column

column-reverse
flex-direction: column-reverse;

flex-wrap(줄넘김 처리 설정) #

컨테이너가 더는 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄 바꿈을 어떻게 할지 결정하는 속성이다.

nowrap (기본값)
flex-wrap: nowrap;

wrap
flex-wrap: wrap;

wrap-reverse
flex-wrap: wrap-reverse;

flex-flow #

flex-direction과 flex-wrap을 한 번에 지정할 수 있는 단축 속성이다.
* [flex-direction flex-wrap]
flex-flow: row wrap;

justify-content(메인축 방향 정렬) #

메인 축 방향으로 아이템들을 정렬하는 속성이다.

flex-start (기본값)
justify-content: flex-start;

flex-end
justify-content: flex-end;

center
justify-content: center;

space-between
아이템들의 사이(between)에 균일한 간격을 만들어 준다.
justify-content: space-between;

space-around
아이템들의 둘레(around)에 균일한 간격을 만들어 준다.
justify-content: space-around;

space-evenly
아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
justify-content: space-evenly;

align-items, align-content(수직축 방향 정렬) #

수직축 방향으로 아이템들을 정렬하는 속성이다. flex-wrap: wrap;일경우 두줄이상에서 align-content를 사용할 수 있다.

stretch (기본값)
align-items: stretch;

flex-start
align-items: flex-start;

flex-end
align-items: flex-end;

center
align-items: center;

baseline
아이템들을 텍스트 베이스라인 기준으로 정렬한다.
align-items: baseline;

justify-content와 align-item을 사용하여 아이템을 쉽게 중앙에 위치시킬수 있다.
justify-content: center;
align-items: center;

column-gap #

아이템들의 열(column) 간격을 쉽게 설정할 수 있다.
column-gap: 20px;

row-gap #

아이템들의 행(row) 간격을 쉽게 설정할 수 있다.
row-gap: 20px;

flex #

flex-basis, flex-grow, flex-shrink를 한 번에 쓸 수 있는 축약형 속성이다. 이 세 속성은 서로 관련이 깊으므로, 축양형을 쓰는 편이 편리하다.

[flex-basis flex-grow flex-shrink]
flex-box: 0 0 100%
flex-basis(유연한 박스의 기본영역)
flex-basis는 Flex 아이템의 기본 크기를 설정한다(flex-direction이 row일 때는 너비, column일 때는 높이).
flex-grow(유연하게 늘리기)
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. flex-grow에는 숫자 값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다. 기본값이 0이기 때문에, 따로 적용하기 전에는 아이템이 늘어나지 않는다.
flex-shrink(유연하게 줄이기)
flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자 값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아진다. 기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

Example #

위에 내용과 미디어 쿼리를 사용하여 간단하게 반응형을 구현할 수 있다.

<style>
.flex-container {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    align-content: center;
    column-gap: 20px;
    row-gap: 20px;
    padding: 10px;
    border: 2px dashed #333;
}
.flex-container .flex-items {
    flex: 1 1 auto;
    background-color: #00b404;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}
@media only screen and (max-width: 1000px) {
    .flex-container .flex-items {
        flex: 0 0 calc((100% - 40px) / 3);
    }
}
@media only screen and (max-width: 500px) {
    .flex-container .flex-items {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}
</style>
<body>
    <div class="flex-container">
        <div class="flex-items">flex-item-01</div>
        <div class="flex-items">flex-item-02</div>
        <div class="flex-items">flex-item-03</div>
        <div class="flex-items">flex-item-04</div>
        <div class="flex-items">flex-item-05</div>
    </div>
</body>