CSS_flex(2)

들어가기에 앞서

flexbox를 다루기 위해서 축의 개념을 알아보면,

주축, 교차축이 있다.

 

주축 = 가로정렬->가로축, 세로정렬->세로축

교차축 = 주축의 수직

 

위의 축은

flex-direction으로 지정할 수 있는데

가로 : row, row-reverse

세로 : column, column-reverse

 

위와 같은 값을 넣어주면 된다.

 

 

이 축의 개념은 요소를 정렬할 때 필수적인 개념이다!

 

---

flexbox에는

부모요소인 flex container

자식요소인 flex items

로 구성이 되어있다.

 

또한 이에따라 적용할 수 있는 속성도 다르다!

참고자료 ↓

(https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

 

flexbox 개념 정리할 수 있는 유용한 사이트 ↓

(https://www.outpan.com/app/1b970b008f/flexbox-playground)

 

flexbox 개념 복습용 게임사이트 ↓

(https://flexboxfroggy.com/#ko)