[CSS] Flexbox

0. 

- Container와 Item 별로 적용할수 있는 속성값이 있다. 

- main axis와 cross axis가 있다. 

 

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: column wrap;

  justify-content: center;
  align-items: center;
}

.item {
  flex: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

중심축에 정렬 -> justifycontent

반대축에 정렬 -> align-items

 

div width를 100%로 하면 부모노드의 넓이와 같아진다.! 

 

 

 

 

1. 

height: 100% vs 100vh

100%는 부모의 높이 전체를 100vh 보이는 view의 100%를 의미한다. 

 

2. CLOR TOOL

색깔조합 사이트 UI와 함께 볼 수 있다. 

 

3. 참고 사이트

A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

A Complete Guide to Flexbox | CSS-Tricks

 

 

Flexbox Froggy - CSS flexbox 속성 배우기 게임

Flexbox Froggy

 

CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube