CSS 의 display: flex에 대한 설명

display: flex 

 

> 세로 정렬이 되는 태그들 (ex : div)을 가로정렬 시키는 css이다(inline으로 바꾼다는 느낌) 좌측상단을 기준으로 정렬이 default

 

Display: flex 한 태그의 자식들만 flex(가로정렬)이 된다 > 자식의 자식들은 적용되지 않는다

 

가로 정렬하는데 사용하면 좋고

 

Justify-content ( justify : 올다고 주장하다 content: 콘텐츠) : 어디로 시작할지 정해주는 css 인데

 

Justify-content: flex-start > 왼쪽 정렬

Justify-content: flex-end > 오른쪽 정렬

Justify-content: center > 중앙으로 정렬 > 자주

 

Justify-content: space-around : 일정한 margin을 아이템 좌우에 가지고 노출된다

Justify-content: space-between : 아이템간에 영역만 떨어지게 된다 > 자주쓴다

Justify-content: space-evenly : 아이템들이 동일한 간격으로 떨어져서 노출된다.

 

Align : 맞추다 items : 아이템들을 > 아이템들을 어디에 맞출꺼야? 이런 느낌이다

 

Align-item : flex-start : 세로 위쪽부터 아이템들을 정렬한다

Align-item : center: y축을 기준으로 가운데로 아이템을 정렬한다

Align-item : flex-end  : y축을 기준으로 아래에서 아이템을 정렬한다

 

Flex + direction : flex한 방향(direction)이 무엇이냐??

 

Flex-direction : column : 세로로 변경되어 정렬

 

Flex-direction : row : 가로로 정렬

 

Flex-direction : column-reverse : reverse를 붙히면 반대로 정렬이된다 column reverse는 아래에서 부터 시작

 

Flex-direction : row-reverse  : row-reverse는 오른쪽부터 시작 : row(가로로) + reverse(반대로)

 

 > 가로영역에서 의 정렬할때 위 방법을 이용하면 좋다. 

 

Order : 순서를 정해준다 0부터 시작하고 음수도 가능하다

 

Order: 1 을 css에 넣으면 지금 자기 자리보다 우측으로 한칸 있는 곳에 아이템과 순서를 바꾼다.

 

Align-self : align(맞추다) self : 자기자신을 > 특정한 항목만 css적용할때 사용하는 느낌이다.

 

Flex-wrap: flex를 어떻게 따로 포장 할것인지 정하는 느낌이다.

 

Flex-wrap: nowrap: 따로 포장 안할거야~ > 한줄에 다 정렬됨

Flex-wrap: wrap : 따로 포장 할거야 > 여러줄로 나눠서 정렬됨

 

Flex-flow: flex-wrap 과 flex-direction을 합쳐지는것

 

Flex-flow: column wrap: 세로로 여러줄로 한다

 

Flex-flow: row wrap: 가로로 여러줄로 한다

 

Align-content: 여러줄이 있을때 여러줄일때의 align-items를 의미한다.

Align-items와 동일하게 

 

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

 

위 방법은 특정 영역 안에서만 적용된다.

 

예전 브라우저 중에서는 작동이 안될수 있다 > 확인방법은 caniuse.com에 검색하면 어떤 브라우저에서는 가능한지 알수있다.