03/10 HTML/CSS Flex (Order, Lines, Alignment)

 

heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드

 

 

 

 

 

 

 

shorthand for

 

순서 중요하다

 

initial : 초기화

none : 다 없애고 싶을 때

 

 

 

 

 

 

 

 

 

 

 

flex-direction

 

 

 

 

 

 

 

flex- wrap

 

 

height의 한정이 필요하다

 

 

 

 

 

 

 

 

높이가 한정 돼있을 경우, cloumn에서 wrap옵션이 필요하다

 

 

 

 

wrap을 이용하면 컨텐츠를 유지하면서 다음열로 층을 나눠준다.

 

wrap

 

 

column과 wrap을 축약해서 한번에 쓸 수 있다 -> flex-flow: column wrap

 

 

 

 

 

 

 

 

 

 

 

ordering

 

item의 순서를 설정

기본값이 0이기 때문에  먼저 쓰려면 음수사용

 

* html의 구조와 상관없이 순서를 변경할 수 있기 때문에 유용하다

 

 

 

 

 

 

 

 

정렬

box-alignment (justify- content)

 

 

 

 

 

 

+  space-evenly : 여백의 크기가 다 고르게 나눠갖게

 

 

 

 

 

 

 

 

align-content

 

: 교차 축의 정렬 방법을 설정 

wrap속성을 통해 2줄 이상이고 여백이 있을 경우 1줄로 만들어 팩킹해서 사용

라인을 신경쓰지 않겠다 -> 층을 없애겠다

 

align-content : center

:하나로 모아서 센터 정렬

 

 

 

 

 

 

 

 

align-items

: content와 달리 한줄일 경우 , 층을 만들어서 사용

 

 

align-items : center

:각각의 플렉스 라인에서 센터 정렬

 

 

 

 

align-self

 

: 교차 축에서 개별 item의 정렬 방법 설정

 

container내에 align-content 설정인 경우 사용할 수 없다 -> align-items 내에서 (개별적) 사용

 

 

 

 

 

 

 

 

2번째 아이템에 basis와 width 함께 사용했을 때

 

 

 

 

 

 

 

 

 

 

 

마진을 사용하게 되면 여백을 원하는 곳에 위치하게 할 수 있다