[CSS] Flex (1) - 개념

1. Flex

flex는 레이아웃을 잡기 위해 탄생했습니다.

기존에는 HTML 시맨틱에 맞지 않는 방식을 사용했습니다. 예를 들어,

• <table> 태그를 이용하여 테이블의 본래 의미와는 다르게 테이블이라는 구조를 잡는데만 사용
• float 속성을 이용해서 레이아웃

그래서 레이아웃을 편하게 잡을 수 있도록 flex라는 것을 지원하게 되었습니다.

현재 대부분의 브라우저들이 표준을 지키려고 노력하고 있고, 비표준은 점점 사라지고 있는 추세이므로 flex를 사용하는 것은 적절하다고 생각합니다.

가장 골칫거리인 IE는 11버전부터 flex를 지원합니다!!

이제 flex가 무엇인지 알아보도록 하겠습니다.

1. flex의 기본 구조

<container>
	<item>

	</item>
</container>

• flex는 부모와 자식 구조여야 합니다.
• flex의 시작은 부모 태그( container )에 display:flex 스타일을 부여하는 것으로 시작이 됩니다.

2. 예제

1) 1단계 display : flex

<style type="text/css">
        .container{
               background-color: powderblue;
               display: flex; 
        } 
        .item{
               background-color: tomato;
               color:white;
               border:1px solid white;
        }
</style>


<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>

• 부모 태그인 <div class="container">에 display:flex 스타일을 부여합니다.
• 그 결과 <div>로 되어있던 item들이 일렬로 정렬된 것을 볼 수 있습니다.
• 즉, block이 아닌 inline이 된 것이죠.

2) 2단계 flex-direction : row-reverse

이번에는 아이템들이 오른쪽으로 정렬될 수 있도록 스타일을 바꿔보겠습니다.

.container{
        background-color: powderblue;
        display: flex;
        flex-direction: row-reverse;
}

• flex-direction : row-reverse
• flex-direction 속성으로 아이템들의 방향을 결정하며,
• row-reverse 값을 부여했더니, 아이템들이 오른쪽으로 정렬된 것을 확인할 수 있습니다.
• flex-direction는 기본 값으로 flex-direction: row인데, 이것은 1단계에서 본 예제와 같습니다.

3) 3단계 flex-direction: column

이번에는 아이템들을 행(row)으로 정렬시키는 것이 아니라, 열(column)로 정렬시켜보겠습니다.

.container{
        background-color: powderblue;
        display: flex;
        flex-direction: column;
}

• flex-direction : column
• column 값을 부여했더니, 컬럼으로 정렬이 되었습니다.
• 2단계에서 보신 것 처럼 flex-direction:column-reverse 속성으로 수정하면, 아이템들이 역순으로 정렬됩니다.

4) 4단계 flex-basis

여러 <div class="item"> 중에서 특정 item만 너비를 넓게 주고 싶을 수 있습니다.

특정 item에 대해서 너비를 넓게 주도록 하려면, 자식 태그에 flex-basis 속성을 사용합니다.

.container{
        background-color: powderblue;
        display: flex;
        flex-direction: row;
        height:200px;
} 


.item{
        background-color: tomato;
        color:white;
        border:1px solid white;
}


/* 2번 째 item이 선택되는 선택자 */
.item:nth-child(2){
        flex-basis: 200px;
}

• 2번 째 item에 대하여 flex-basis: 200px 속성을 추가했습니다.
• 이 속성은 flex의 기본 크기가 200px이라는 뜻인데, 일단은 기본 크기라는 점만 기억하고 조금 뒤에 다시 살펴보겠습니다.

5) 5단계 flex-grow

4단계의 결과를 보시면 푸른색은 부모 태그의 너비를 의미합니다.

item들이 남은 여백을 모두 채우고 싶을 때는 자식 태그에 flex-grow 속성을 사용합니다.

.item{
        background-color: tomato;
        color:white;
        border:1px solid white;
        flex-grow:1;
}


/* 제거 */
.item:nth-child(2){
flex-basis: 200px;
}

• 테스트를 위해, 2번째 아이템의 basis를 제거합니다.
• flex-grow : 0의 모습은 4단계의 모습과 같으며, flex-grow 속성의 기본 값은 0입니다.
• flex-grow : 1을 할당할 경우, 전체 너비를 아이템들이 1/5 씩 차지하게 됩니다.

6) 6단계 flex-grow

여기서 item들이 전체 너비를 꽉 채우는데, 2번 째 item의 너비를 조금 더 주고 싶다면 어떻게 할까요?

.item{
        background-color: tomato;
        color:white;
        border:1px solid white;
        flex-grow:1;
}

.item:nth-child(2){
        flex-grow:2;
}

• 2번 째 item 요소에 대해 flex-grow : 2 값을 주고, 나머지 item 요소에는 flex-grow : 1 값을 주었습니다.
• 그 결과 2번 째 item 요소의 너비가 다른 item들보다 넓게 차지하고 있는 것을 볼 수 있습니다.
• 이 의미는 <div class="item"> 5개에 대하여, 전체를 6등분으로 나누는데 2번 째 item 요소에게는 2/6 만큼을, 나머지 item 요소는 1/6 만큼의 너비를 할당하라는 의미입니다.
• 즉, flex-grow의 값을 많이 줄수록 그만큼 차지하는 너비가 넓어진다는 것을 알 수 있습니다.

7) 7단계 shrink

.item{
        background-color: tomato;
        color:white;
        border:1px solid white;
}

.item:nth-child(2){
        flex-basis:300px;
}

위와 같은 스타일이 있을 때 item의 상태는 다음과 같습니다.

이 상태에서 브라우저 크기를 줄이면, 당연히 2번 째 item의 너비도 함께 줄어들게 됩니다.

이 때 2번 째 item은 최소한의 크기는 유지할 수 있도록 하려면 어떻게 할까요?

이 때 사용하는 것이 flex-shrink 속성입니다.

.item:nth-child(2){
      flex-basis:300px;
      flex-shrink: 0;
}

• flex-shrink 속성의 기본 값은 1이며, 그 결과는 브라우저 크기가 줄어들면 자신의 크기를 유지하지 않습니다.
• flex-shrink : 0 값을 부여하면, 위의 결과와 같이 브라우저 크기가 줄어도 자신의 basis 크기인 300px을 유지하려고 합니다.
• 즉, flex-shrink를 사용하기 위해서는 flex-basis 값이 존재해야 합니다.

8) 8단계 shrink

만약 2개의 item에 대해 flex-shrink를 부여하는데, 그 값을 다르게 준다면 어떻게 될까요?

.item:nth-child(1){
        flex-basis:250px;
        flex-shrink: 1;
}


.item:nth-child(2){
        flex-basis:250px;
        flex-shrink: 2;
}

• 첫 번째 item에 flex-shrink : 1을 부여하고, 두 번째 item에 flex-shrink : 2 값을 부여한 후, 브라우저 크기를 줄인 모습입니다.
• flex-grow에서는 값을 크게 줄 수록 차지하는 너비가 넓어졌지만, flex-shrink는 값을 크게 줄 수록 줄어드는 너비가 넓어집니다.
• 그래서 첫 번째 item의 너비가 두 번째 item 보다 넓은 것을 볼 수 있습니다.

3) 여러가지 속성

1) align-items

item들을 브라우저 화면의 높이를 기준으로 중앙에 위치하게 할 수 있습니다.

body{
        display:flex;
        align-items: center;
        border: 1px solid black;
}

• align-items의 값으로 다음과 같은 것들이 있습니다.
• flex-start
• flex-end
• baseline
• stretch ( 기본 값 )

2) justify-content

item들을 브라우저 화면의 가로길이를 기준으로 중앙에 위치하게 할 수 있습니다.

body{
        display:flex;
        align-items: baseline;
        justify-content: center;
        border: 1px solid gray;
}

.container{
        display:flex;
        flex-direction: column;
        width:700px;
        border: 1px solid gray;
}

• container에 width : 700px 값을 준 이유는 justify-content가 가로 길이를 기준으로 중앙에 위치하게 하는지 확인하기 위함입니다.

이상으로 flex가 무엇이고, 간단하게 어떻게 사용하는지 알아보았습니다.

이 밖에도 flex에는 많은 속성들이 있는데, 검색을 통해 더 많은 기능들을 살펴보면 좋을 것 같습니다.

다음 글에서는 flex를 이용해서 레이아웃을 만들어 보도록 하겠습니다.

[ 출처 ]

생활코딩 CSS - Flex