CSS flex 속성 정리

Flex 속성이란? 

사진으로 보다싶이 하나의 큰 Container(부모요소) 라고 불리는 박스안에 여러개의 Items 가 있는 형식으로 구성이 됩니다.  

Flex container 의 속성 : 

이런 flex 속성 안에는 items 를 만져줄 수 있는 Container의 속성이 여러가지가 있다.

display : flex container 를 정의한다. 

flex-direction : items 의 주축을 설정한다. 
flex-wrap : items 의 묶음, 즉 영역을 설정한다. 
flex-flow : flex-direction 과 flex-wrap 을 모아놓은 것으로 items가 여러행으로 많이 있을때 사용한다.

justify-content : items의 주축의 정렬 방법을 설정한다. 
align-content: 2줄 이상의 items 에서 교차축의 정렬 방법을 설정한다. 
align-items : items 의 교차축의 정렬 방법을 설정한다. 

flex-direction 의 속성 : 

row,row-reverse : row 는 원래 그대로의 가로 정렬을 담당한다. 영어뜻에서 알 수 있듯이 row-reverse는 원래 그대로의 가로 정렬을 반대로 뒤집는다. 

flexbox froggy 라는 css 워게임//아무것도 정의되지 않은 컨테이너 안 items 의 모습들이다. 

row-reverse 를 이용하면 뒤집어진 것을 확인할 수 있다. 

column, column-reverse : 위와는 다르게 세로 정렬을 해주는 속성이다. 똑같이 column-reverse 는 세로 정렬로 된 상태에서 뒤집어준다. 

flex-wrap 의 속성 :

nowrap : 말그대로 영역을 설정하지 않는 다는 것으로 한줄에 표시되게 만듭니다.
wrap , wrap-reverse : items 를 여러줄로 묶습니다. fles-direction 에서의 reverse 와 같이 영역 안에서 items 를 뒤집어 줍니다. 

justify-content 의 속성 : 

flex-start, flex-end , center : items를 시작점이나 끝점으로 정렬 해줍니다. center 는 말 그대로 중앙에 정렬 시켜줍니다.  

일반 items 

justify-content : flex-end 를 이용해 끝점으로 정렬 해 주었다. 

space-between, space-around : between 은 시작 item 을 시작점 끝 item 을 끝점으로 정렬해 나머지 item은 일정한 간격을 두고 정렬하게 해줍니다. around 는 모든 items 를 일정한 여백을 두고 정렬해줍니다. 

align-items, align-content 의 속성 :

stretch : 컨테이너의 교착 축을 채우기 위해 items 를 늘림
flex-strart, flex-end, center : justify-content 와 똑같이 정렬하지만 주축이 아님 교차축에서 정렬함

이 사진을 보면 쉽게 이해 할 수 있음

space-between, space-around : 교차축에서 justify-content 와 똑같이 정렬.

Flex items 속성

지금까진 flex container 에 대한 속성을 알아봤다면 이번에 items 들을 직접적으로 만질 수 있는 items 속성이다. 
이런 items 속성에는 여러가지가 있다. 

order : items 의 순서를 바꿔준다. 
align-self : 교차축의 정렬 방법을 만져줌, 여러개의 items 중 하나만 바꾸고 싶을때 사용 
flex : 밑 3가지 속성의 단축판
flex-flow : 증가 너비를 설정
flex-shrink : 감소 너비를 설정
flex-basis : items 의 기본 너비를 설정한다. 

빨간 개구리를 앞으로 옮기기 위해 order 를 사용 해 줍니다. 

이런식으로 순서를 조정해 줄 수 있다.