CSS ) Flexbox에 대해서

Flexbox

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

 

 

flex를 사용하였을 때 빈 공간의 간격을 맞춰주는것을 알 수 있다

 

주축(main-axis)과 교차축(cross-axis)을 알 수 있다

 

 

 

 

 

flexbox에는 주의해야 할 점 3가지가 있다.

• 자식 엘레멘트에는 어떤 것도 적지 말아야 한다. ( 부모 엘레멘트에만 명시해야함) >>자식들을 움직이려면 부모에게만 명시하면 됨
  (예외적으로 부모의 지정된 align-items,justify-content의 내용을 무시하고 개별요소를 적용시킬 수 있는 align-self, justify-self를 이용할수도 있다)
  
  다만 (부모-자식1)관계에서 (자식1-자식2)의 관계로 늘어나고 자식2의 내용을 정렬하고 싶다면 자식1에게 display:flex를 중복사용 할 수 있다.
• justify-content 와 align-items를 적용하고 싶으면 먼저 display:flex를 해야한다
• justify-content는 주축 (main-axis)를 통해 움직이고 align-items는 교차축(cross-axis)를 통해 움직인다.
  주축은 수평으로 디폴트가 설정되어있고 교차축은 수직으로 설정 되어 있다
  이를 바꾸려고 한다면 flex-direction : column을 이용하면 주축과 교차축이 뒤바뀌게 된다

(default값은 row이다)

 

 

 

 

 

 

 

flex 기능을 잘 연습해볼 수 있는 사이트 하나를 소개해드리고 마무리하겠습니다

 

 

flexboxfroggy.com/#ko

Flexbox Froggy

flex를 연습하는 사진