flex box는 container에 적용 시킬 수 있는 속성이 존재하고 각 item에 적용 시킬 수 있는 속성이 존재함.
display: 화면에 아이템을 어떤 모양으로 배치할 것인지 지정
flex-direction(default: row): - 아이템을 어느 방향으로 배치할 것인지 지정
flex-wrap: nowrap -화면을 축소시킬 때 아이템을 다음줄에 배치시킬 것인지를 지정
flex-flow: 위 2개를 합한 거임.
justify-content (default: flex-start): 중심축을 기준으로 아이템을 어떻게 배치할 지 정하는 것.
align-items: 중심축과 반대되는 축을 정렬
align-content: align-items와 비슷하지만 nowrap인 경우 의미가 없음. justify-content의 속성을 똑같이 사용할 수 있음.
order: item의 순서를 지정할 수 있음 - 잘 사용되지 않음
flex-grow : 화면이 커지면 item의 크기가 고정되는 것이 아니라 같이 커질 수 있게 함. - 중요
flex-shrink: 화면이 작아질 때 어떤 비율로 작아질 지 설정.
flex-basis: item들이 공간을 얼마나 차지해야 되는지 세부적으로 설정할 수 있게 해줌.
align-self: item별로 item들을 정렬할 수 있음.
main축이 뭔지 생각하면서 위의 것들을 사용해야 함.
100% vs 100vh
100%로 background를 지정하면 해당 박스의 100%로 채워지기 때문에 background color가 보이지 않음.
100vh는 보이는 viewport height의 100%를 다 쓰겠다는 의미.
color찾기 좋은 곳: https://material.io/resources/color/#!/?view.left=0&view.right=0 : COLOR TOOL
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
flexbox공부 사이트 ✅
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-tricks
A Complete Guide to Flexbox
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
flexbox를 사용해볼 수 있는 게임 사이트 ✅
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
사진 출처: CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube
'Front > CSS' 카테고리의 다른 글
| [CSS] 레이아웃 (0) | 2021.07.12 |
|---|---|
| [CSS] 선택자 (0) | 2021.07.12 |