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화 시킨후 부모요소와 같은 방식으로 컨텐트를 조정할 수 있음.
body가 flex를 가지고 있더라도 div에 flex를 주지 않으면 컨텐츠는 디폴트가 됨
(flex container안에 자식이 있고 자식엘레멘트도 flex container야 함)
4. flex-box는 기본적으로 no-wrappong 상태이다
flex-box는 요소의 사이즈를 신경쓰지 않는 상태
박스에 width값을 줬지만 초기값으로만 인식하고 창이 줄어들면 width도 함께 줄어듬
flex-wrap: wrap; 을 통해 박스크기는 유지하고 line에 들어갈만큼만 유지하고
범위를 벗어나면 다음 줄로 넘어가게됨