flex 관련 이론 (2)

메인 축 정렬

 - 메인 축 정렬 속성은 justify-content로 할 수 있으며 기본 속성은 flex-start이다.

 - flex-start : 메인 축 시작점을 기준으로 정렬

   flex-end : 메인 축 끝을 기준으로 정렬

   center : 메인 축 중앙 정렬

   space-between : 좌우는 축의 시작과 끝에 배치하고 나머지를 여백을 주며 정렬

   space-around : 각 요소의 좌우에 같은 여백을 주며 정렬

   space-evenly : 모든 요소에 같은 여백을 주며 정렬

교차 축 정렬

 - 교차 축 정렬 속성은 align-items로 할 수 있으며 기본 속성은 flex-start이다.

 - flex-start : 교차 축 시작 점을 기준으로 정렬

   flex-end : 교차 축 끝을 기준으로 정렬

   center : 교차 축 중앙 정렬

   baseline : 요소 안에 있는 텍스트의 베이스라인을 기준으로 정렬

flexwrap

 - 앞서 배운 내용에서 flex 속성을 주게 되면 부모요소의 크기에 맞춰 자식요소들의 크기도 줄어드는 모습을 볼 수 있었다.

   이때, flex-wrap 속성을 이용하면 크기가 줄어들게 되면 자식요소들이 줄 바꿈을 하게 할 수 있다.

 - 기본속성은 nowrap이며, 같은 너비로 부모 요소에 맞춰 줄어든 상태로 정렬이 되어 있는데, wrap 속성을 주게 되면

   자식 요소의 원래 너비 만큼 돌아오며, 넘치는 부분은 아래로 내려와서 정렬이 되게 된다.

align-content

 - flex-wrap 속성을 사용 했을 때처럼 한줄을 넘기는 요소들을 교차 축 방향으로 정렬할 때 사용한다.

 - 정렬 되는 방식은 align-items와 justify-content 속성이 가지는 특징들을  포함한다.