[flexBox] flex-wrap, align-content 공부하기

flexbox 를 공부중인데, flexbox 는 width 를 신경쓰지 않는다.

만약 내가 width 를 px 로 주어 설정했더라도 flexbox 는 한 줄에 다 표현하려고 하기 때문에 width 가 달라진다.

 

다음과 같이 child box 들의 width 와 height 를 200px 로 주어도 화면 크기가 작아짐에 따라

다음과 같이 정사각형이 width 가 변하면서 일그러지는 모습을 보인다.

 

 

바로 flex-wrap 속성 때문인데, 부모 컨테이너에 flex-wrap: nowrap 이 기본으로 설정되어있다. 

무슨 일이 있더라도 element 가 같은 줄에 있어야 해! 라고 말하는 것과 같다.

 

만약 flex-wrap: wrap 으로 바꾼다면, child 의 크기를 유지해! 라고 말하는 것과 같다.

 

 

그런데 여기서 의문이 생겼다. 1-4 box 와 5-6 사이에 공간은 뭐지? 

line 이라고 하는데, align-content 를 통해 수정할 수 있다.

예를 들어, align-content: flex-start 를 준다면 다음과 같이 바꿀 수 있다.