Giters

yeoseon / tip-archive

트러블 슈팅 및 팁을 모아두는 레포 (Today I Learned)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[css] flex 활용하기

yeoseon opened this issue · comments

commented

레이아웃 잡을 때 많이 사용한다. 잘 알고 쓰자

commented

CSS Flex 활용하기

레이아웃을 구성할 때 보통 요소들을 블록개념으로 표시한다.
수직 구조는 만들기 쉬우나, 수평 구조를 만드는 속성이 명확하지 않아서 <table>이나 inline-block같은 것을 많이 썼다.
하지만 이는 쉽지 않았던 것 같다.

이 것을 Flex라는 속성을 이용하여 쉽게 구성해보자 !

간단한 예제

수평이 될 요소들의 Container에 display: flex;를 해주시만 하면 된다 !

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.box-container {
  display: flex;
}

CSS3 Flexible Box

Container와 Item을 구분하여 생각한다.
image

Container

display, flex-flow, justify-content 등의 속성을 이용할 수 있다.

속성 의미
display Flex Container를 정의
flex-flow flex-direction와 flex-wrap의 단축 속성
flex-direction Flex Items의 주 축(main-axis)을 설정
flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정
justify-content 주 축(main-axis)의 정렬 방법을 설정
align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

display

block, inline-block 으로 표시 하지 않는다.

값 의미 기본값
flex Block 특성의 Flex Container를 정의  
inline-flex Inline 특성의 Flex Container를 정의

Items에는 영향을 주지않는다. Container와 Container의 차이일 뿐

image

image

flex-flow

flex-direction과 flex-wrap 속성을 단축시킨 개념.
다음과 같은 형태로 사용한다.

flex-flow: [flex-direction 옵션] [flex-wrap 옵션]
값 의미 기본값
flex-direction Items의 주 축(main-axis)을 설정 row
flex-wrap Items의 여러 줄 묶음(줄 바꿈) 설정 nowrap
  • flex-direction
    Items의 주 축을 설정한다.(main-axis)
값 의미 기본값
row Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 row
row-reverse Items를 row의 반대 축으로 표시  
column Items를 수직축(위에서 아래로)으로 표시  
column-reverse Items를 column의 반대 축으로 표시

image

주 축(main-axis)와 교차 축(cross-axis)
flex-direction 값에 따라 달라진다.
교차축은 주 축의 수직이 되는 축

image

시작점(flex-start)와 끝 점(flex-end)
주 축이나 교차 축의 시작하는 지점과 끝나는 지점
image

  • flex-wrap
    Items의 여러 줄 묶음(줄 바꿈) 설정
값 의미 기본값
nowrap 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) nowrap
wrap Items를 여러 줄로 묶음  
wrap-reverse Items를 wrap의 역 방향으로 여러 줄로 묶음

기본적으로 Items는 한 줄에서만 표시되고 줄바꿈 되지 않는다.
width와 height을 무시하고 한 줄 내에서만 가변한다.
줄 바꿈을 위해서는 wrap을 사용한다.

image

justify-content

주 축의 정렬 방법 설정

값 의미 기본값
flex-start Items를 시작점(flex-start)으로 정렬 flex-start
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬

image

align-content

교차 축의 정렬 방법 설정
flex-wrap을 통해 Items가 여러 줄이고, 여백이 있을 경우에만 사용한다.

Items가 한줄일 경우 align-items 속성을 사용한다.

값 의미 기본값
stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch
flex-start Items를 시작점(flex-start)으로 정렬  
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬

image

align-items

교차 축에서 Items의 정렬 방법을 설정한다.
Items 가 한 줄일 경우 많이 사용한다.

Items가 여러 줄 이상일 경우에는 align-content 속성이 우선한다.
따라서 align-items를 사용하려면 align-content 속성이 default(strech)여야 한다.

값 의미 기본값
stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch
flex-start Items를 각 줄의 시작점(flex-start)으로 정렬  
flex-end Items를 각 줄의 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
baseline Items를 문자 기준선에 정렬

image

Flex Items

order, flex, align-self 등의 속성을 사용할 수 있다.

속성 의미
order Flex Item의 순서를 설정
flex flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow Flex Item의 증가 너비 비율을 설정
flex-shrink Flex Item의 감소 너비 비율을 설정
flex-basis Flex Item의 (공간 배분 전) 기본 너비 설정
align-self 교차 축(cross-axis)에서 Item의 정렬 방법을 설정

order

Item의 순서를 설정한다.
Item에 숫자를 지정하고, 숫자가 클 수록 순서가 밀린다.
음수도 허용된다.
기본값은 0
HTML 구조와 상관없이 순서를 변경할 수 있어 유용하다!!
image

flex

보통 500픽셀 크기를 같은 Container 내에 100픽셀 크기의 Item 3개가 있을 때, 사용 가능한 공간 200픽셀은 마지막의 빈 공간으로 남겨둔다.
이 공간들을 잘 분배하는 방식을 변경하기 위해 사용한다.
image

Item의 너비(증가, 감소, 기본)을 설정하는 단축 속성
flex-grow, flex-shrink, flex-basis를 순서대로 설정한다.

다음과 같이 사용한다.

flex: [flex-grow 속성 값] [flex-shrink 속성 값] [flex-basis 속성 값]  

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용된다.) */
}
값 의미 기본값
flex-grow Item의 증가 너비 비율을 설정 0
flex-shrink Item의 감소 너비 비율을 설정 1
flex-basis Item의 (공간 배분 전) 기본 너비 설정 auto

flex-grow를 제외한 개별 속성은 생략할 수 있다.
하지만 flex-basis를 생략했다고 해서 default 값인 auto라고 생각하기 쉽겠지만, 0으로 적영되는 것에 주의하자.

  • flex-grow
    Item의 증가 너비 비율 설정
    숫자가 크면 더 많은 너비를 가진다.
    image

  • flex-shrink
    Item이 감소하는 너비의 비율을 설정한다.
    숫자가 크면 더 많은 너비가 감소한다.

요소의 너비(width, height, flex-basis 등으로 너비가 지정된 경우)에 영향을 받는다.
Container의 너비가 줄어 Items 너비에 영향을 미칠 경우, 그 시작 지점부터 줄어든 거리 감소만큼 너비 비율의 맞게 Item의 너비 또한 줄어든다.

계산이 까다로워 활용도는 떨어진다.

flex-grow 와 flex-shrink의 값이 비율임을 유의하세요. flex 항목의 flex 속성을 모두 1 1 200px 로 지정하고 한 항목만 크기가 늘어나는 비율을 타 항목의 두배로 하고 싶으면 해당 flex 항목의 flex 속성을 2 1 200px로 지정하면 되지만, flex 속성 값을 모두 10 1 200px로 지정하고 늘어나는 비율을 두 배로 하고 싶은 항목의 flex 속성 값만 20 1 200px로 지정해도 동일하게 동작합니다.

flex-grow와 flex-shrink의 값은 비율이다 !
flex 항목의 flex 속성을 모두 1 1 200px 로 지정하고 한 항목만 크기가 늘어나는 비율을 타 항목의 두배로 하고 싶으면 해당 flex 항목의 flex 속성을 2 1 200px로 지정하면 되지만,
flex 속성 값을 모두 10 1 200px로 지정하고 늘어나는 비율을 두 배로 하고 싶은 항목의 flex 속성 값만 20 1 200px로 지정해도 동일하게 동작한다.

  • flex-basis
    항목의 크기를 결정한다.
    크기(width, height)가 지정되어 있지 않으면 이 속성의 값으로 사용한다.
    Item의 (공간 배분 전) 기본 너비를 설정한다.
    값이 auto일 경우, width, height 등의 속성으로 Item의 너비를 설정할 수 있다.
    flex 속성 내에서 생략하면 값이 0이 되는 것에 주의하자
    image

align-self

교차 축에서 개별 Item의 정렬 방법을 설정한다.

align-items은 Container 내 모든 Item의 정렬 방법을 설정한다.
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 사용한다.
align-items보다 우선한다.

값 의미 기본값
auto Container의 align-items 속성을 상속받음 auto
stretch Container의 교차 축을 채우기 위해 Item을 늘림  
flex-start Item을 각 줄의 시작점(flex-start)으로 정렬  
flex-end Item을 각 줄의 끝점(flex-end)으로 정렬  
center Item을 가운데 정렬  
baseline Item을 문자 기준선에 정렬

image

Reference