css Flexbox 정리

감싸는 컨테이너에는

• dispaly
• flex-direction
• flex-wrap
• felx-flow
• justify-content
• align-items
• align-content

각각 item에는

• order
• flex-grow
• flex-shrink
• flex
• align-self

 

높이100%를 맞추는

방법 1.

html{height:100%}

body{height:100%}

.container{height:100%}

상위 테그에 다 100%를 줘야함

 

방법2.

.container{height:100vh}

100vh(view hight) 는 부모에 상관없이 현재 보이는 영역을 100%로 하겠다.

  - 100vw 가로100%

상위 테그에 100%를 안줘도 됨

 

 

Material Design Color Tool (색상 예쁘게 조합해서 쓸수있음) :aㅇterial Design Color Tool:Material Design Color Tool:

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

Color Tool - Material Design

 

 

.container {

display:flex; 

flex-direction: row(기본값) || column  (아이템 전체의 방향을 가로로)

flex-wrap: nowrap(기본값) || wrap (아이템을 한줄로만 한다)

flex-flow: row nowrap (위 2가지를 한번에)

justify-content : flex-start (기본값) (아이템 배치 결정)

align-items:center (세로중 가운데로 놓는다)

align-content : center (세로의 배치 결정)

}

 

.item{

order:1

width:40px;

height:40px;

}

.item1{

order:2 

flex-grow:2(2만큼 자라서 꽉찼다.)

flex-shrink:2(2만큼 줄어들어라)

flex-basis: 60%

flex : 2 2 auto   (grow , shrink, basis)

}

.item2{

order:3(순서를 정의할때)

flex-grow:0 (기본값) 1 (가로나 세로를 1만큼 자라서 꽉 채우겠다. 0이므로 안채우겠다.)

flex-shrink:0 (기본값) 1 (가로나 세로를 줄이겠다.)

flex-basis: auto (기본값) (공간을 설정하는 grow나 shrink 없이 혼자 쓸수있음)

flex : 2 2 auto   (grow , shrink, basis)

align-self: center (얘 하나만 스스로 센터로 맞추고싶어; 컨테이너 지정된걸 벗어나)

}

.item3{

order:4

flex-grow:1(1만큼 자라서 꽉찼다.)

flex-shrink:1 (1만큼 줄어들어)

flex-basis: 10%

flex : 2 2 auto   (grow , shrink, basis)

}

 

게임으로 테스트를..

https://flexboxfroggy.com/

Flexbox Froggy