[Css] Flexbox

container에 꾸밀수 있는건

display flex-direction flex-wrap flex-flow justify-content align-items align-content

 

item 지정할 수 있는건

order flex-grow flex-shrink flex align-self

 

초기세팅

 

 

container: 100vh 에서 100% 로 바꾸면 배경이 사라진다

container의 부모의 높이에서(부모 -> body) 100%로 하겠다

item에 width, height 추가

 

container에 display: flex를 주면 한줄에 작성된다

 

flex-direction: row가 기본값

 

flex-direction: row-reverse 는 오른쪽에서 왼쪽으로

 

flex-direction: column 위에서 아래로

 

flex-direction: column-reverse 는 밑에서 위로

 

 

flex-wrap: nowrap 은 기본값이 nowrap

아이템이 더 많아져도 한줄에 계속 붙어있다

 

flex-wrap: wrap은 한줄에 가득차면 자동적으로 밑으로간다

flex-wrap: wrap-reverse는 밑에서부터 거꾸로

 

justify-content는 아이템들을 어떻게 배치할건지 알려준다

기본값은 justify-content: flex-start 축에 따라서 시작이 다르다

justify-content: flex-end, flex-direction: row 는 으론쪽에 치우쳐진다

 

justify-content: flex-end, flex-direction: column 일시는 아래쪽으로 위치

 

justify-content: center 일시 중간에 배치

 

justify-content: space-around 일 시, 1번째 10번째 는 1개분량 정도만 띄어져있다

 

justify-content: space-evenly 는 똑같은 간격으로 띄움

 

justify-content: space-between 는 중간만 띄움

 

item1에 padding 20px 넣을때 item1의 숫자 위치가 다르다

그러면 align-items: baseline을 넣어주면 균등하게 표시된다

 

item들 수를 더 늘리고 

container에 넣는다

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;

 

align-content: space-between 을 작성하면 위에와 아래는 딱 달라붙는다

 

 

다시 초기셋팅을 하였다

order: 0이 기본이다.

order에 따라 순서가 바뀐다

flex-grow: 0 이 기본이다

flex-grow:1을 하면 창 사이즈를 늘였다 줄였따하더라도 item1의 넓이만 바뀐다

모두에게 골고루 1을 주면 1:1:1 비율로 늘어난다

 

flex-shrink는 크기가 줄어들때 어떤 비율로 줄어들지 지정해줌

(flex-shrink:1)

 

flex-basis는 윈도우창에 줄어들고 늘어날때 비율을 지정해줌

(flex-basis: 60%)

 

align-self 컨테이너를 벗어나서 해당 아이템의 위치만 바꿀때 사용

(align-self: center)

 

flexbox 사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

 

출처 : https://www.youtube.com/watch?v=7neASrWEFEM&list=WL&index=21