Flexbox.4 wrap,nowrap,align-content

flexbox는 width와 height를 설정했더라도 몇개를 만들었든 한 라인에 모두 정렬된다.

만약 7개의 200width를 가진 박스를 flexbox로 만들어주면

사진에서 보이 듯 그냥 다 때려박는다.

이말은 flex-wrap이 default로 no wrap상태라는 거다.

flex-wrap이란 

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

CSS: Cascading Style Sheets | MDN

flex아이템들이 한라인에 머물게 할 것인지 아니면 멀티플 라인에 배치되게 할것인지 결정해주는 속성이다.

멀티플에 배치한다는 것은 박스들의 크기를 유지한채로 가능한 라인을 만들어 주는 것이다 라고 보면 된다.

그럼 flex-wrap: wrap으로 속성을 지정해보자

이렇게 크기를 유지한채로 두라인에 걸쳐 flexbox를 배치해준다.

 

그런데~ 위 아래 라인간에 간격이 있다.

잘 생각해보면 현재 라인으로 정렬된 기준은 cross-axis 바로 수직을 기준으로 정렬 되어 있다.

그렇다면 이 간격을 어떻게 조절 해줄까~

바로 align-content라는 property를 이용해주자.

음 필자가 생각하기엔 align-content는 cross-axis상의 justify-content같은 속성같다.

align-content도 value가 비슷해서랄까 기준도 비슷하다

space-between, space-around, center, flex-end, flex-start 등등등~

자 그럼 flex-start를 적용해보자

이렇게 간격이 없어지고 위로 다 붙었다. 정리하자면 flex된 박스들을 wrap속성으로 배치해주고 새로생긴 라인들간에서 align-content를 통해 cross-axis상에서 위치를 조정해줬다.

음.. 헷갈릴 수도 있는데 몇 번 적용하다보면 될 듯 하다

 

헷갈리지 말자 align-items는 cross axis상에서 flexbox 전체를 height상에서 함께 간격 조정 없이 정렬을 시키는 것이고

align-content는 박스와 박스 사이의 빈공간을 cross-axis에 따라 정렬하는 방식이다 align계의 justify-content인 것이다!