[Css] - FlexBox 정리

Flex box

• 특징 3가지
• 자식 요소에는 어떤 것도 적지않아야함
• 부모요소에만 명시 display : flex

 

• Flexbox ( 주축과 교차측)

: main axis

: cross axis

• Justify-content : 수평(주축)으로 작용하는것으로 생각할수잇다

: 주축에서 움직인다.

• Align-items : 교차축에 적용됨 ( 기본적으로는 수직 )

: 교차 축에서 적용되어 움직임

: 교차축에 있는 아이템들을 움직이게 한다 .

: Justify-content 에 비해 많은 옵션이 없다.

 

▶둘다 축 변경 가능

 

• Vh (view point height) : screen 이라고 생각하면 됨

 

!! 더 쉽게 사용하기 위해 flexbox 를 적용하고 싶으면

자식요소가 아니라 부모요소에게 알려주면 된다.

 

!!! 여기선 부모 : body

   자식 : div

Justify-content, Align-items 을 적용하고싶으면

먼저 display :flex를  해줘야한다.

그러면 해당 엘리먼트가 flex 컨테이너가 된다.

 flex컨테이너는 두개의 주축을 가지고있고

주축과 교차측을 가지는데

디폴트로 주축은 수평 ,

교차측은 수직이다.

 

만약 body(부모)가 height를 가지고 있지않다면

그러면 align-items를 설정하더라도 바뀌지않는다

이미 맨 위아래의 중심에 있으니까 !!

이경우에는 부모에 height 를 준다!

 

view point height는 맥 ,윈도우 화면크기마다 다 다르다 .

 

• 만약 flex-container의 주축과 교차측을 바꾸고싶으면

: flex-direction 을 사용

: 디폴트는 row(수평) , 다른건 column(수직)

만약  flex-direction :columns 으로 설정시

주축은 수평 에서 수직

교측은 수직에서 수평 으로 변경

 

• Align-items : stretch  일 경우

• 자식에 너비 및 높이가 설정되어있으면 적용이 되지않는다
• Stretch는 div를 늘어나게 하는데 고정된 값이있으면
• 고정된 값을 없애줘야 적용이 된다.

 

FlexBox 의 또다른 특징

1. (부모요소) flex-wrap : wrap 설정시 전체 화면 변경시 자식요소의 고정된 너비를 유지하면서 변화됨