CSS Flex Box Model
위코드 1주차 과정때 만들었던 홈페이지가.. 내가보기에도
음.. 별로라고생각이 들어 다시 리뉴얼할려고 하던 도중..
css에 또 부딪혔다...오늘만큼은 제대로 알고가자는 의미에서
정리해볼려고한다; 어떤 문제가어려웠을까? 생각해보면
원하는 위치에 고정을할것인지 부모의 크기가 늘어늘어나도 고정으로 할것인지 유동적으로 만들것인지
등 박스모델에 대해서 어려웠던것 같다. 왜냐면 속성에대한 이해도가 낮았기때문에;;
relative 도 지금의 위치에서 설정한 위치만만큼 멀어지는것인데 다르게 이해했었고
여러 다른 문제들이 발생하면서 문제해결에 점점 막히면서 답답함을 느꼈다
내 나름대로 정리해보겠다 .
더이상은안되겠다 다시한번 확인하자
Flex Box에 알아야할것은 2가지 ❗️
container - 박스에 적용되는 속성이 존재 한다
Container
display ➰ justify-content
flex-direction ➰ align-items
flex-wrap ➰ align-content
flex-flow
Item - 아이템에 적용되는 속성이 존재한다
Item
order ➰ flex-grow
flex-shrink ➰ flex, align-self
Container flex:
display : flex;
(수직으로 나열된 컨테이너를 수평으로 변경하되 왼쪽에서 오른쪽으로 나열 )
이렇게 왼쪽에서 오른쪽으로 정렬된다
display: flex;
flex-direction : row;
(왼쪽에서 오른쪽으로 정렬)
display: flex;
flex-direction : row-revers;
(오른쪽에서 왼쪽으로 정렬)
display: flex;
flex-direction : column;
(기준 축이 수평에서 수직으로 바뀜)
display: flex;
flex-direction : column-reverse;
(기준이 수직선 아래에서 위로 정렬됨)
display: flex;
flex-direction: row;
flex-wrap: nowrap;
(브라우저의 크기가 아무리 작아져도 그대로 붙어있다)
display: flex;
flex-direction: row;
flex-wrap: wrap;
(브라우저의 창이줄거나 한줄에 표현되어야할 크기가 넘어서면 자동으로 다음줄로 컨텐츠를 정렬한다)
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
(맽아래 줄을 기준으로 바뀌면서
브라우저의 창이줄거나 한줄에 표현되어야할 크기가 넘어서면 자동으로 윗줄에 컨텐츠를 정렬한다)
Tip point ❗️
flex-direction 와 flex wrap 을
flex-flow 에 같이 사용할수있는데
flex-direction: column;
flex-wrap: nowrap; 이부분을
flex-flow: column nowrap;flex-flow를 이용해서 한번에 속성값을 입력할수있다.
마치 border : 1px solid black; 과 같다고 생각하면 된다
flex-direction 은 수평이중심축인지 수직이 중심축인지에 정렬방법이다
Item - justify-content:
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : flex-start
(justify-content 의 기본값은 아이템을 왼쪽에서 차례로 정렬 )
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : flex-end;
(flex-end는 정렬순서가 바뀌지않고 위치만 오른쪽으로 붙임)
그런데 만약에
justify-content :flex-end; 에
flex-direction : column;
으로 주게되면
이렇게 바뀌게 된다
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : center;
(아이템 센터정렬)
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : space-around;
(화면상 크기를 기준으로 양쪽 여백을 일정하게 주고 정해진 크기의 아이템의 개수를
일정하게 칸을 띄워 나열한다
아이템이 많을경우엔 줄바꿈을 하지않고 그대로 계산되어 나열된다 )
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : space-evenly;
(양쪽여백없이 오로지 아이템의 개수에 비례해서 일정한 칸을 띄워 나열한다 )
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : space-between;
(화면의 양쪽 끝에 여백을주지않고 아이템의 개수에 비례해서 일정한 칸을 띄워 나열한다)
❗️justify-content 는 중심축에서 아이템을 어떻게 배치할것인가? 라고 생각하면 된다
align-items : 수직으로 봤을때 아이템을 어디에 둘것인지
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : space-between;
align-items: center;
(수직축이 중심이되어 어디에 둘것인지)
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content : space-between;
align-items: baseline;
(베이스 라인 같은 경우는 텍스트를 균등하게 정렬 해준다 )
align-content : justify-content와 비슷하지만 중심축이 justify-content의 반대축이 된다 justify-content의 속성을 모두 사용할수있다.
display: flex;
flex-direction: row;
flex-wrap: wrap; > nowrap 에서 wrap 으로 변경
justify-content : space-between;
align-items: baseline;
align-content : space-between;
이게 무슨말이냐면 같은 space-between 이라고하면
justify-content : space-between 이면
양쪽(오른쪽,왼쪽)을 여백없이 붙이고 중앙을 중심으로 (왼쪽 오른쪽) 일정하게 나열하는 것
align-content : space-between 이면
아래 위 여백없이 붙이고 중앙을 중심으로 일정하게 나열하는것
점점..헷갈리기 시작한다 ;;
함께 알아본 flex box
큰그림을 그릴줄알면 MDN이나 여러 사이트에서 필요한 속성을 찾아내서 문제를 해결하는데
어려움은 조금은 줄어들것이다.
오늘로써야 기본적인부분들이 완성된것같아 마음이 좀 편안해진다
내가생각하기엔 프론트엔드의 는 css와 javascript 두 큰 산이있는것같다
CSSOM 도 공부해야하는데;; 그건언제하지;;;
.......
.......
달려보자~😄👍👍👍👍
