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의 부모(body) 100%

body의 부모(html) 100%

부모의 height에 상관없이 viewpoint에 적용하려면 100vh

 

Color tool

material.io/resources/color/#!/?view.left=0&view.right=0

 

display: flex; flex박스 시작

nowrap : 한줄에 아이템이 아무리많아도 랩핑을 안하겠다. (기본값)

flex-wrap : wrap ; 다음라인으로 넘어감

*flex-flow : column nowrap; 

 

방향,랩핑(다음줄로넘어갈건지)

 

 

justify-content 중심축에서 아이템들을 어떻게 배치할지

justify-content : flex-start ; (왼쪽축 배치)

justify-content : flex-end ; (오른쪽배치)

justify-content : center ; (오른쪽배치)

아이템들을 어떻게 배치할것인지

 

justify-content : space-around;

아이템사이에 공백(맨앞쪽공백+뒤쪽공백 이 사이사이들어감)

 

justify-content : space-evenly; 똑같은간격

 

justify-content : space-between; 첫아이템과 마지막아이템은 화면에맞게붙이고 간격일정

 

 

align-items 반대축에서 아이템배치

align-items :center; 수직적으로 중심에 배치

 

 

shrink :2 ; 2배 더 많이 줄어든다

shrink: 1; 

 

 

container의 width에 따라 60%30%10%씩 변동한다

 

align-self: 아이템하나만 배치하고싶을떄

flex:1는 flex: 1 1 0와 같다