div/ container style

div

position:

 

relative :  window나 원래 자리에서 이동

absolute: 아이템이 담겨있는 컨테이너에서 왼쪽 위 모서리부터 이동

fixed : 상자는 무시하고 window틀에서 이동

sticky:스크롤을 옮겨도 안 옮겨지고 계속 같은자리에 붙어있음 

 

 

 

 

Container

display: flex(가로정렬)

 

1. flex-direction(박스나열순서):

row(왼->오)

row-reverse;(오->왼)

column;위-> 아래(세로정렬)

column-reverse;(아래->위)

 

2. flex-wrap:

nowrap(화면 크기에상관없이 무조건 한줄)

wrap:꽉차면 다음라인 (-reverse가능)

 

3. flex-flow

(1.2.번을 한번에 합쳐서 쓸 수 있음)

column nowrap;

 

4. flex-content

 

 

6. justify-content(flex-direction가 세로/가로정렬인지에 따라 다름)

flex-start:왼쪽벽/왼쪽위에서 부터 나열

flex-end:오른쪽 벽/위에서부터 나열

space-arount/between/evenly :박스를 둘러싸 살짝씩 띄어줌

 

 

7. align-items(y축 기준 정렬)

baseline: 크기가 달라도 중간정렬이됨

 

8. align-content(y축기준) has 

center:윗칸 아랫칸에  간격을 동일하게하고 중간정열이됨

 

 

 

 

Item

order(순서바꾸기)

2;

1; 

 

flex-grow

1;(페이지 늘릴 때 첫번째 박스만 늘어남)

 

flex-shrink

1;(페이지 늘릴 때 첫번째 박스만 늘어남)

 

flex(각각 박스가 화면에서 차지하는 각각의 %를 지정가능)

 

align-self(아이템하나만 특별하게 위치지정하고싶아)

center;