[4주 프로젝트][회고]기록 남기기 #2

오늘 프로젝트 2일 차에는 기획 회의를 진행을 했다. 

팀 주제와 wireframe을 그려나갔다. 아직까지 뭔가 이슈거리가 없어서 특별히 글로 남 길거리가 없다.

 

오늘도 css 공부를 계속 이어나갔다.

오늘은  flex의 wrap, nowrap, reverse, align-content, flex-grow, flex-shrink, flex-basis에 대한 개념을 배웠다.

 

wrap은 flexbox에게 child의 width 크기를 유지하라고 애기한다. 

nowrap; 무슨 짓을 하더라도 이 엘리먼트들은 같은 줄에 있게 한다.

flex-grow / flex-shrink 는 원하는 자식의 크기를 얼마만큼 줄이거나 키우거나 할 수 있다. ( box 주변의 공간을 가져.)

예를 들어, response design할 때 1, 2 ,3이 메뉴라고 생각해보자.

화면 사이즈가 줄 경우지만, 난 2번 메뉴는 크기가 망가뜨리고 싶지 않을 경우, 사용할 수 있다.

 

flex-basis는 기본적으로 width다. flex-basis는 main-axis에서 작용하니깐..

flex-direction가 column일 경우, main axis는 세로, cross axis는 가로다.

 

아래 flexbox froggy 게임을 하면서 flex에 대해서도 조금 친해지는 시간이었던 거 같다.

 

 

 Flexbox Froggy 

flexboxfroggy.com/

Flexbox Froggy