[CSS] Flexbox

😙 Flexbox 완전 정리!

1. 우선 Container 와 그 안의 items 에 적용할 수 있는 속성 값들이 다르다는 것을 인지하자.
2. 중심축과 반대축으로 나눠진다. 내가 중심축을 어디로 두는 지에 따라 반대축이 바뀐다.

container

• display - flex로 정의

	display: flex;

• flex-direction

	flex-direction: row; (default)

• flex-wrap - 한 줄에 가득 차면 다음 줄로 넘어가게 할 건지

	flex-wrap: nowrap; (default)

• justify-content -중심축 기준으로 배치

	justify-content: flex-start; center;
    				 space-around; space-evenly; space-between;

• align-items -반대축 기준으로 배치

	align-items: center;
    			 baseline; (text가 나란히 배치)

• align-content - justify-content 와 사용법 동일 (근데 반대축!)

items

• order
• flex-grow -컨테이너가 늘어날 때 비율 지정

	flex-grow: 0; (default)

• flex-shrink -컨테이너가 줄어들 때 비율 지정

	flex-shrink: 0; (default)

• flex-basis -아이템별 비율을 지정. grow와 shrink 동시에 지정 효과

	flex-basis: 60%; (예시)

• align-self -아이템별 배치

	align-self: center;

참고 사이트 🐤
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

MDN 🐽
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

출처 😎
https://www.youtube.com/watch?v=7neASrWEFEM
드림코딩의 유튜브를 보고 정리한 자료 입니다!
유튜브를 보시면 훨씬 더 잘 이해될 겁니다 ㅎㅎㅎ