CSS flex를 정리하면서

1차원 레이아웃 구조를 작업할 때 사용(수평정렬, 수직정렬을 할 때 사용한다)

 

2차원 레이아웃 구조는 Grid와 같은 경우가 있다.

 

 

display : flex

block요소의 특성과 유사

block요소는 수직정렬이 되고, 가로가 최대한 넓어진다.

 

display: inline-flex

inline요소의 특성과 유사

inline요소는 수평정렬되고, 가로가 최대한 줄어든다.

사이의 공간은 띄어쓰기 부분이다.

flex 컨테이너  자체는 inline요소가 되어있는 것이다.

 

html 요소마다 띄어쓰기를 지우게 되면 아래처럼 붙어서 나오게 된다.

 

flex요소의 주축과 교차축

주축(main-axis)

- 주가 되는 축

- flex direction이 row면 x축이 주축이 된다.

 

교차 축(cross-axis)

- 주가 되는 축의 반대 축

- flex direction이 row면 y축이 교차축이 된다.

 

 

flex- wrap 

flex요소가 줄바꿈 되는지

 

no-wrap: 줄바꿈 처리가 되지 않는다(기본속성)

wrap : 줄바꿈 처리가 가능하다

wrap-reverse : 반대방향으로 줄바꿈을 해준다.

 

 

align-items

align-items와 align-content의 차이

align-items는 한 줄을 기준으로 정렬하는 반면, align-content는 두 줄부터 사용하는데 의미가 있다

그래서 align-content의 경우, 두 줄의 flex-wrap:wrap;인 상태에서 사용해야 한다.

만약 no-wrap이면 라인이 넘어가지 않아 계속 한 줄인 상태이기 때문에

align-content를 사용해도 적용이 되지 않는다.

align-self

부모 요소의 자식 아이템들을 각각 다른 방식으로 정렬하고 싶다면 (정렬을 개별로 설정하고 싶다면)

align-self를 사용한다.

 

Flex items

flex-grow

- 증가 너비 비율을 설정

- 기본 값은 0

- 1을 입력하면 1 : 1: 1 ... 의 비율로 컨테이너 전체를 차지하게 된다.

- 전체 컨테이너 비율이 아니라 현재 요소의 너비를 제외한 너비의 비율을 따지는 것이다! -> 중요

두번째 요소에만 flex-grow : 2를 주었을 때

 

flex shrink

- 감소 너비 비율을 설정

- 기본 값은 1

- flex-shrink: 0 을 입력하면 아래와 같이 컨테이너가 감소해도 안의 요소가 넘치게 된다.

flex-basis

- 요소의 기본너비를 설정

- 기본 설정은 auto

- px값을 입력하면 width와 height를 사용할 수 없게 된다.

 

 

flex : grow shrink basis 로 사용가능

 

flex : 1 0 auto 이런 식으로 사용 가능하다.

만약 

flex : 1을 사용하면 전체 컨테이너의 비율로 grow을 사용가능하다. -> 왜?

 

flex : 1 로 shrink와 basis에 값을 넣지않으면 예상한 것은 속성의 기본 값이 들어가야한다.

하지만 위에서 말했듯이 flex : 1을 적용하면 전체 컨테이너의 비율에 grow가 적용된다.

이는 basis의 값이 0이 된것인데

이것이 단축 속성의 주의할 점이다

 

basis의 기본 값은 auto 지만 단축속성에서 지정하지 않으면 auto가 아닌 0이 된다.

 

order

- flex item의 순서를 지정해주는 것

- 기본 값은 0

- 첫번 째 요소에 order : 1 을 지정하면 기본 order값이 0인 요소보다 뒤에 위치하게 된다.

- 음수도 사용 가능하다.

 

gap

- 요소 사이의 여백을 만들 수 있다.

- 최신 기술이라 동작하지 않는 브라우저가 있다.

 

margin-rigth : 10px 를 사용하고

.item:last-child { margin-right : 0; } 을 사용해서 gap과 같은 효과를 낼 수 있다.

이 방법을 사용하는 것을 권장한다.