CSS flex box

div.container> div.item.item${$}*10  다음 tab키를 누르면 간단하게 작성

div태그의 클래스는 container 컨테이너 안에 또다른 div item 만들고 클래스는 item으로 
뒤에$를 쓰면 자동지정{$}*10 10번 반복

 

 

 

-float

이미지와 텍스트를 어떻게 둘것인지를 정의하기 위해 존재한다.

float: left 

이미지가 왼쪽으로 가고 텍스트가 이미지를 감싸면서 출력

 

-flex box

 

flex box는 container와 item으로 구분되어 사용이 된다.

 

container를 꾸밀 수 있는 것은

display, flex-dircetion, justify-content 등등이 있고

 

item은

flex-grow, flex-shrink, aligin-self 등 있다.

 

 

flex-box를 사용하고 싶으면

display: flex;를 입력하면 된다.

 

container

flex-direction:row

default 값은 row  

column으로 바꾸면 열로 바뀐다.

 

flex-wrap: nowrap

default 값이 nowrap

warp으로 바꾸면 아이템들이 창에 꽉 차면 자동적으로 다음 줄로 넘어간다.

 

flex-flow

flex-direction,  flex-wrap 이 두 개를 합친 것

flex-flow: column nowrap; 이렇게 작성 시 열로 바뀌고 다음 줄로 넘어가지 않는다.

 

justify-content 

중심축에서 아이템을 어떻게 배치할 건지 알려준다.

jusify-content:space-around: 박스를 둘러싼다.
jusify-content:space-evenly: 똑같은 간격으로 둘러싼다
justify-content: flex-start 처음부터 왼쪽에서 오른쪽으로
justify-content: flex-end 순서는 유지하되 오른쪽으로 붙여서 배치

 

 

item

order: 순서를 내가 바꾸고 싶을 때 사용

 

flex-grow: 0이 default

1로 지정을 하면 페이지를 꽉 채우기 위해 사이즈가 늘어난다.
2는 나머지에 비해 2배로 늘어난다.

flex-shrink: 컨테이너가 작아지면 어깨 행동하는지
1로 지정을 하면 작아지면 같이 줄어든다

flex-basis: 아이템들이 공간을 얼마나 차이 하는지 도와준다
auto가 기본값
60% 로 입력을 하면 다른 것들이 비해 60 퍼의 크기로 존재해라 라는 의미

align-self: item별로 item을 정렬 가능
align-self:center를 쓰면 쓰인 아이템만 center로 간다.