Flex

프론트엔드 개발을 해오면서 매우 자주 사용하게 되는 css키워드인 flex이다.

보통 어플리케이션 레이아웃을 구성할때 수직/수평으로 구성한다. 이때 사용되는 키워드가 flex이다.

flex는 1차원 레이아웃 모델로 설계되었다. 여기서 말하는 1차원이란, 우리가 레이아웃을 다룰때 하나의 방향만을 다루는 것을 의미한다. (수평 또는 수직). 2차원 레이아웃 모델로는 Grid가 있는데 다음 포스팅에서 다뤄보려고한다.

<div className='flexbox'>
</div>

.flexbox{
    display : flex;
    flex-direction : column;
}

예시처럼 html요소에 flex를 주게 되면 flex container가 되어 하위 자식들은 flex item이 된다.

기본적으로 레이아웃의 기준방향(주축)은 수평(row)로 설정이 되어있으며, flex-direction 속성으로 조정이 가능하다. 이 레이아웃의 방향 기준으로 정렬하는것을 justify-content, 레이아웃의 수직 기준으로 정렬하는것을 align-items이다.

.flexbox {
    display: flex;
    flex-direction: column;
    // justify-content는 주축기준 정렬이므로, 현재 방향인 수직기준 위아래간격을 정렬시킨다.
    justify-content: center;
    // align-items는 수축의 수직방향, 즉 items들의 좌우간격을 정렬한다.
    // 예시는 left이므로 items들을 수평기준 왼쪽으로 정렬한다.
    align-items: left;
}

flex-container 안의 item들의 크기는 flex-basis로 조정이 가능하다.

.flexitems {
    // flex-basis: auto; 기본값
    flex-basis: content;
    // flex-basis: 10px;
}

기본값은 auto로 설정이 되어있다. 이 경우, item에 width값이 있다면 해당 값을 따르고, 없다면 아이템의 내용 크기만큼을 가진다. (만약 basis값에 특정 크기를 주고 width값을 동시에 주게 되면 width값을 따른다.)

만약 item들의 크기를 상대적으로 정의하려면 flex-grow를 이용한다.

.flexitems:nth-child(2) {
    // flex-grow: 1; 기본값
    flex-grow: 2;
}

기본값은 1이다. 예시처럼 특정 item의 크기를 다른 아이템들보다 크게 만들수 있다.