Css Flex 속성

* display: flex / inline-flex;

flex cotainer를 정의해준다. item들은 각각의 내용물 넓이만큼 수평정렬된다.

 

inline-flex는 container의 속성에 inline 속성을 추가한 것이다.

 

item들이 나열된 축을 메인축이라 하고, main 축과 수직을 이루는 축을 교차축이라 한다.

* flex-direction: row(기본) / column / row-reverse / column-reverse;

메인축 방향을 지정해준다.

 

각 속성의 방향은 다음과 같다.

row →

column ↓

row-reverse ←

column-reverse ↑

 

여기서 신기한 것은 대한민국의 경우 글을 왼쪽에서 오른쪽으로 쓰지만 아랍권에서는 오른쪽에서 왼쪽으로 쓰기 때문에 row의 경우 반대가 된다고 한다. 즉 언어의 default 속성을 따라간다고 한다.

* flex-wrap: nowrap(기본) / wrap / wrap-reverse;

float 속성과 같이 container의 크기가 item들의 크기 합보다 작아졌을 때 밑으로 아이템을 내릴 것인지 아닌지를 결정한다.

 

nowrap의 경우 container 크기가 작더라도 item을 내리지 않지만, wrap의 경우 item을 내린다. wrap-reverse는 wrap의 반대이다.

* flex-flow: flex-direction  flex-wrap;

위에서 배운 flex-direction과 flex-wrap을 한 번에 쓸 수 있다.

* justify-content: flex-start(기본) / flex-end / center / space-between / space-around / space-evenly;

메인축 정렬을 관리한다.

 

flex-start의 경우 메인축 시작쪽에 옹기종기 정렬을 하고, flex-end는 메인축 끝나는 쪽에 옹기종기 정렬을 한다.

 

center는 가운데로 정렬한다.

 

space-between은 메인축의 시작과 끝쪽에 공간없이 item들 사이에 균일한 공간을 준다.

 

space-around는 메인축의 시작과 끝쪽에 공간이 생긴다. 각 item의 양쪽에 균일한 공간을 준다.

 

space-evenly는 메인축의 시작과 끝쪽에 공간이 생기는데, 그 공간이 각 item들 사이에도 적용이 된다.

* align-items: stretch(기본) / flex-start / flex-end / center / baseline;

교차축 정렬을 관리한다.

 

이 속성에 의해 float 속성과 차이점이 생긴다.

 

stretch는 아이템을 교차축으로 쭉 늘린다.

 

flex-start는 교차축의 시작쪽에 옹기종기 정렬한다. 높이는 float 속성과 같이 각 item 안에 있는 내용물만큼 갖는다.

 

flex-end는 교차축의 끝쪽에 옹기종기 정렬한다.

 

center는 가운데로 정렬한다.

 

base-line은 텍스트 베이스라인을 기준으로 정렬한다.

* align-content: stretch(기본) / flex-start / flex-end / center / space-between / space-around / space-evenly;

flex-wrap이 wrap 속성을 갖고 여러 줄일 때, 교차축 정렬을 관리한다.

 

각 속성들은 justify-content와 align-items에 나오는 속성과 비슷하다.

* flex-basis

item의 기본 크기를 정한다.

 

flex-direction이 row일 때는 넓이를, column일 때는 높이를 정한다.

 

수치를 입력할 수 있는데, flex-basis: 100px일 때, 100px보다 작은 내용물을 가진 item들은 공백으로 100px을 채우고, 100px보다 큰 내용물을 가진 item은 내용물의 크기를 갖는다.

 

기본값은 auto이다.

* flex-grow

부모가 늘어날 때, 안에 있는 item들이 몇 대 몇의 비율로 늘어날지 정한다.

 

기본값은 0이다.

* flex-shrink

부모가 줄어들 때, 안에 있는 item들이 몇 대 몇의 비율로 줄어들지 정한다.

 

기본값은 1이다.

 

flex-shrink: 0으로 속성을 준 것은 줄어들지 안는다.

* flex: flex-grow  flex-shrink  flex-basis;

위 세 가지 속성을 한 번에 쓸 수 있다.

 

flex: 1; → flex-grow: 1; flex-shrink: 1; flex-basis: 0; (flex-basis의 기본값은 auto지만 여기서는 0이 된다.)

 

flex: 1 300px; → flex-grow: 1; flex-shrink: 1; flex-basis: 300px;

* align-self: auto(기본) / stretch / flex-start / flex-end / center / baseline;

item에 부여하는 속성으로 item 하나에 해당하는 교차축 정렬을 관리한다.

 

align-items보다 우선권이 있다.

* order

각 item의 나열 순서를 결정한다.

 

숫자가 낮을수록 먼저 렌더링된다.

 

스크린리더랑은 다르다. 접근성에 문제가 생길수도 있다.

* z-index

item들이 겹쳐있을 때, z-index 속성 숫자가 큰 item이 위에 나타난다.