-
[드림코딩 Css] Flex-box프로그래밍/CSS 2023. 6. 26. 13:26
Flex-box란?
박스와 아이템들을 행과 열로 자유자재로 배치할 수 있는유용한 것들이며 박스가 커지면 어떤식으로 아이템들이 공간에 배치되어야 하는지 알 수 있다.
flexbox에는 중심축과 반대축이 있다는 것을 생각하고 구현을 해보자 중심축이 어디냐에 따라서 어떻게 정렬할 지가 바뀌기 때문이다.
100% 와 100vh 등등 쓰는 단위로 인해서 일어나는 차이를 알아보자
100% === container가 속해있는 부모의 크기에 100%로 맞추겠다는 것
100vh === 부모에 상관없이 보이는 viewPortGeight을 쓰겠다는 의미
container 와 item으로 나누고 두개의 속성을 각각 알아보자
container
- display; (속성을 지정한다 flex, block 등등)
- flex-direction;
- flex-wrap; (item의 크기가 container를 꼭하면 다음으로 넘어간다.)
- flex-flow; (flex-direction + flex-wrap)
- justify-content; (item의 배치를 결정한다 기본값은 중심축을 기준으로 배열하며 space-arounnd 등등 여러가지 있음)
- align-items; (반대축에 어떻게 정렬할지 정해준다. 중심축이 가로정렬에 대한 얘기라면 align-items는 반대축인 세로에 대한이야기를 한다 baseline 등등)
- align-content; (반대축의 아이템을 지정한다 space-bteween 등등)
item
order; (숫자를 넣으면 item의 정렬 순서가 바뀐다 애초에 배치를 잘하면 되지 혹은 중요표시해서 앞으로 땡겨올 때 쓸 수도 있을 듯)
flex-grow; (페이지를 줄였다가 늘렸다가 했을 때 고유값을 넘어가도 그 비율에 맞춰서 크기를 채우려 하는 것)
flex-shrink; (점점 작아졌을 때 grow의 반대역할)
flex-basis; (아이템이 공간을 얼마나 차지해야하는지를 명시할 수 있다)
align-self; (아이템 하나의 위치만 따로 배치하고 싶을 떄 사용한다)
기타 툴
color tool and flex frog
이걸로 CSS가 끝이났다고 생각하지말고 키워드로 생각해서 search할 때 써먹어보자.
'프로그래밍 > CSS' 카테고리의 다른 글
[TailwindCSS] TailwindCSS사용 5가지의 모범사례 (0) 2023.11.21 [유노코딩] 반응형 웹 Part 1 ~ 7 (0) 2023.06.28 [CSS] Display && Position (0) 2023.06.24 띵동코딩 CSS (0) 2023.06.01 [CSS] position에 관하여 (0) 2021.04.29