CSS

studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

위 사이트는 진짜 정리 너무 잘해주셔서 이해하는데 큰 도움이 되었다.

 

display________________________________________________________________

static : display 의 default 값

 

absolute : 자신의 부모 박스컨테이너에 내에서 다른 아이템들을 무시하고 포지셔닝됨

 

relative : 자신의 부모 박스컨테이너 내에서 지정한 만큼 움직임

 

fixed : 부모를 다 무시하고 window 컨테이너 자체에서 움직임

 

sticky : scroll 등의 효과가 발생해도 sticky로 지정된 컨테이너는 그 위치에 고정됨(ex : nav bar)

 

Flex____________________________________________________________________________

 

flex는 박스에 적용할수 있는 속성, 아이템에 적용할 수 있는 속성이 있다

 

박스에 적용할 수 있는 속성

display, flex-drection, flex-wrap, flex-flow, justyify-content, align-items, align-content

 

아이템에 적용할 수 있는 속성

order, flex-grow, flex-shrink, flex, align-self

 

Box__________________________________________________________________

 

display : flex 의 기본값은 row이며 사용할 수 있는 값은 row, row-reverse, column, column-reverse

flex-direction 에서 메인축을 row, column으로 지정해주면 된다.

 

flex-wrap 은 아이템 요소들에 wrap 요소를 지정해주는데 아이템요소들이 길이를 벗어날 경우

자동으로 줄바꿈해주는 역할을 한다 => nowrap, wrap, ..reverse

 

flex-flow 는 flex의 direction과 wrap을 합친 속성

 

justify-contant : 아이템들을 어떻게 배치할 것인가를 중심축을 기준으로 설정함

default : flex-start // flex-end

space-around : 아이템를 둘러싸게끔 규칙적으로 spacing 해줌

space-evenly : 좌, 우 끝도 같은 spacing

space-between : 아이템 사이에만 spacing

 

align-items :  아이템 전체를 어떻게 배치할 것인가를 중심축의 반대축 기준으로 설정함

center, baseline

 

align-content : justify-contant의 반대로 속성은 같음

 

 

Item______________________________________________________________

 

order : 기본값은 0 이며, 위치를 지정해줄 수 있음

 

flex-grow : grid의 templateX와 같은 개념

 

flex-shrink : 컨테이너가 작아졌을 때 어떻게 행동하는가를 지정함 default : 0

 

flex-basis : 아이템들이 공간을 얼마나 차지해야되는지 세부적으로 명시해줌 default : auto

 

align-self : 원하는 아이템만 align 축에 맞게 위치를 지정할 수 있음. center 같은 속성 사용