CSS Layout_1_Flexbox

배운점

1. FLEX를 사용하는 이유

float 혹은 inline-block 로 마크업할 때
화면 크기가 달라질때마다 그에 알맞게 변하지 않고 다 깨지거나
혹은 기본값으로 불필요한 여백들이 생기기 때문

Flex는 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 원하는 곳에 적절한 속성을 부여해서 사용할 수 있습니다.
출처 : css flex 정리 블로그

2. FLEXBOX에서 부모가 자식을 옮기는 법

flex-direction row 인 (기본값)경우 :

Main axis가 가로축 & Cross axis가 세로축

jusify-content : 가로축에 있는 flex children의 위치 변경

center , space-between,space-around 등 다양한 property가 있음

align-items : 세로축에 있는 flex children의 위치 변경

역시 다양한 property가 있음 (center, stretch, flex-end 등)

%주의%

align-items: center할 경우 부모 클라스에 높이가 반드시 있어야함.
부모(flex-father)의 영향을 받기 때문에 부모의 높이를 확인 후
그 안에서 center로 조절 해야함.

부모에서 세로축 property를 stretch로 하고
자식에서 height 설정을 안해야 부모 높이까지 쭉 늘어남.

flex-direction column (기본값이 x) 인 경우 :
Cross axis가 가로축 & Main axis 세로축

3. FLEXBOX에서 자식을 직접 옮기는 법

align-self 로 자식 하나를 지정하면 위치 각각 변경

.자식클라스명:nth-child(1){
align-self: center;
}

order 로 자식 하나를 지정하면 html 안 건들이고 순서변경

.자식클라스명:nth-child(1){
order: 1;
}

4. flex-wrap

flex-wrap:wrap;
flex-wrap:nowrap;
높이와 너비가 있어도 한 줄로 정렬하는 것을 최우선으로 하기때문에 너비가 변경 될 수 있음 따라서 property wrap으로 하면 설정한 너비 그대로 보이게 해줌

5. reverse , align-content

reverse: 순서를 변경

flex-wrap-reverse 이런식으로 사용가능

align-content: align-items과 혼동 주의

flex Item들이 두줄 이상으로 배치되어있을 경우
각 줄을 어떻게 배치할 것인지 설정. 
flex item이 한줄로 배치되어 있을 경우 동작 안함.

5. 기타
   flex-grow
   flex-shrink
   flex-basis

느낀점

CSS 이론 인강을 들었을때 한번 가볍게 들었던 용어들이
클론코딩 강의에서 보여졌을때 한눈에 들어왔다.
이론강의에서는 왜, 언제 저것을 사용하나? 하는 의문이 들었고
클론코딩에서는 이론 설명이 약간은 부족하다고 생각이 들었다.
따라서

두 강의를 반복 병행하면 CSS 실력을 빠싹 올리는데
도움이 될 것이라 예상한다.

Flexbox Froggy게임하면서 flex box를 손에 익히는 연습을 하였다.
자유자재로 익혀서 원하는 방향으로 아이템들을 빠르게 위치시키는 날이 머지 않았기를

인강을 통하여 배운 것을 복습하는 포스팅이므로 잘못된 정보는 예쁜말로 피드백 주시면 언제나 감사합니다.