flexbox

일반적으로 웹 페이지의 레이아웃은 CSS의 display, float, position 등과 같은 속성을 사용해 구현한다. 하지만 이속성을 사용하면 구현방법이 복잡하고 레이아웃을 표현하는데 많은 한계가 있습니다. 

구현이 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flex box를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있습니다. 

 

flexbox란?

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있습니다. 

정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, css만으로 다양한 레이아웃을 구현할 수 있다. 

 

flexbox의 구성

flexbox는 복수의 자식 요소의 flex item과 그 상위 부모 요소인 flex container로 구성됩니다.

flexbox 만드는 방법

.frame{
 display:flex;
 }

display:flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식요소는 flex item이 됩니다. flex item은 주축(main axis)에 따라 정렬됩니다. 주축의 방향은 flex container의 flex-direction 속성으로 결정합니다. flex-direction속성을 따로 지정하지 않으면 기본값인 row가 적용됩니다. row는 주축의 방향을 왼쪽에서 오른쪽으로 또 다른 속성값인 column은 주축의 방향을 위에서 아래로 방향으로 흐르게 한다. 

 

부모 요소와 자식 요소에 정의하는 속성 구분

• flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content
• flex item 속성 : flex, flex-grow, flex-shrink, flex-basis,order

 

 

flex container의 속성들

display:flex;

Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 됩니다. height는 컨테이너의 높이만큼 늘어나게 됩니다. 

 

배치방향설정

• flex-direction : 배치방향설정입니다.(속성값으로는 row, column, row-reverse, column-reverse 등)

 

줄 넘김 처리설정

• flex-wrap : 줄 넘김 처리설정입니다. 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유공간이 없을 때 아이템 줄 바꿈을 어떻게 할지 결정하는 속성입니다.
• nowrap(기본값) : 줄바꿈을 합니다. 
• wrap-reverse : 줄바꿈을 하는데, 아이템을 역순으로 배치합니다. 
• flex-flow : flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성입니다. flex-direction, flex-wrap의 순으로 한 칸 떼고 써줍니다. 

.frame{
    flex-flow:row wrap;
}

 

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

.frame{
   justify-content:flex-start;
}

• flex-start(기본값) : 아이템들을 시작점으로 정렬합니다.
• flex-end : 아이템들을 끝점으로 정렬합니다. 
• center : 아이템들을 가운데로 정렬합니다.
• space-between : 아이템들의 사이(between)에 균일한 간격을 만들어 줍니다.
• space-around : 아이템들의 "둘레(around)"에 균일한 간격을 만들어 줍니다.
• space-evenly : 아이템들의 사이와 양끝에 균일한 간격을 만들어 줍니다.

 

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

수직축 방향으로 아이템들을 정렬하는 속성입니다. 

.frame{
   align-items:flex-start;
}

• stretch(기본값) : 아이템들이 수직충 방향으로 끝까지 늘어납니다.
• flex-start : 아이템들을 시작점으로 정렬합니다.
• flex-end : 아이템들을 끝으로 정렬합니다.
• center : 아이템들을 가운데로 정렬합니다.
• baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬합니다. 

 

Flex 아이템에 적용하는 속성들

유연한 박스의 기본영역(flex-basis)

flex-basis는 Flex 아이템의 기본크기를 설정합니다(flex-direction이 row일 땐 너비, column일 땐 높이)

.frame_item{
   flex-basis:auto;
 }

flex-basis의 값으로는 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있고, 기본값 auto는 해당 아이템의 width값을 사용합니다. width를 따로 설정하지 않으면 콘텐츠의 크기가 됩니다. 

 

유연하게 늘리기(flew-gorw)

flew-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성입니다. flew-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 매우게 됩니다. 

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flew-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하면 됩니다. 

유연하게 줄이기(flew-shrink)

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작이질 수 있는지를 결정합니다.