Flex box를 알아보자

앞선 포스팅에서 inline-block의 문제점을 알게 되었다.

 

이를 해결하기 위한 방법으로 flexbox를 이용!

 

constant 부모요소 = body태그 자식요소 = div태그 로 가정하겠다.

 

 

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다.

 

1. flebox는 영향을 주고싶은 요소의 body에 특별한 display속성 값을 지정한다.

only 부모요소에만 지정해야한다. body태그로 div태그를 조정.

이후 justyfy-content, align-items등등을 이용해 박스를 조정한다~

 

2. main-axis && cross-axis

 

*flexbox는 주축과 교차축을 가지고 있다.

ex> justyfy-content는 주축에 적용 , aligne-item은 교차축에 적용

*if body가 height이 없고 박스크기만큼 크기이면 align-items가 적용 되지 않는다.

 

*주축은 default : 수평 ,교차축은 default: 수직 (but 변경 가능하다)

변경하는 방법은 flex-direction을 사용

*flex-direction

display:flex의 default는 row

flex-direction: column을 주면 주축은 수직이되고 교차축은 수평이 된다.

(! main-axis와 cross-axis가 바뀌는게 아니고 default가 수평->수직, 수직->수평으로 바뀌는 것)

 

3. div에 content를 추가하면 flex-contaioner로 만들 수 있다.

자식요소인 div에 컨텐츠를 추가하고 flex화 시킨후 부모요소와 같은 방식으로 컨텐트를 조정할 수 있음.

 

flex-box를 자식요소 div에 적용시킨 모습

body가 flex를 가지고 있더라도 div에 flex를 주지 않으면 컨텐츠는 디폴트가 됨

(flex container안에 자식이 있고 자식엘레멘트도 flex container야 함)

 

4. flex-box는 기본적으로 no-wrappong 상태이다

flex-box는 요소의 사이즈를 신경쓰지 않는 상태

박스 width 300px height 300px

박스에 width값을 줬지만 초기값으로만 인식하고 창이 줄어들면 width도 함께 줄어듬

 

 

flex-wrap : wrap;을 이용

flex-wrap: wrap; 을 통해 박스크기는 유지하고 line에 들어갈만큼만 유지하고

범위를 벗어나면 다음 줄로 넘어가게됨