TIL wecode 11. div flex 정렬

이조은·2020년 7월 28일

TIL wecode

목록 보기

10/36

부모 요소에서 사용하는 것으로, 자식 요소의 정렬 방식에 대해서 변경한다.

부모 요소에서 사용하는 것으로, 자식 요소의 수평 방향에 대한 정렬이다.

justify-content: flex-start; (기본값)
text-align: left;와 같은 개념으로 왼쪽으로 정렬된다.
justify-content: center;
text-align: center;와 같은 개념으로 가운데 정렬된다.
justify-content: flex-end;
text-align: right;와 같은 개념으로 오른쪽 정렬된다.
justify-content: space-around;
자식 요소의 좌/우에 충분한 여유공간을 두고 균등하게 정렬된다.
justify-content: space-between;
자식 요소의 좌/우에 공간없이 부모 요소에 밀착해 균등하게 정렬된다. (자식 요소가 2개인 경우, 좌/우에 완전 밀착됨)

부모 요소에서 사용하는 것으로, 자식 요소의 수직 방향에 대한 정렬이다.

align-itmes: stretch; (기본값)
자식요소의 콘텐츠의 크기에 상관 없이, 가장 큰 높이값을 갖는 자식요소를 기준으로 동일한 세로크기에 맞춰진다.
align-items: flex-start;
vertical-align: top;과 같은 개념이다. (상단 정렬)
align-items: center;
vertical-align: middle;과 같은 기념이다. (세로 중앙 정렬)
align-items: flex-end;
vertical-align: bottom;과 같은 개념이다. (하단 중앙 정렬)
align-items: baseline;
부모 요소의 기준선에 배치된다고 나오는데, 결과값은 flex-start와 동일하다.

부모 요소에서 사용하는 것으로, 자식 요소를 감쌀 때 어떤 스타일로 감싸줄 지를 정의한다. 보통 자식 요소가 고정값을 가질 때 유용하게 사용될 수 있다. 부모 요소보다 자식 요소의 크기가 더 클 경우, 다음 줄로 넘길 지를 결정한다.

flex-wrap: nowrap; (기본값)
자식 요소가 다음 줄로 넘어가지 않고 가로로 계속 배치된다. 브라우저에 가로 스크롤바가 생긴다.
flex-wrap: wrap;
부모 요소에 더 이상 가로 공간이 없을 경우, 자식요소가 다음 줄로 넘어가서 배치된다.
flex-wrap: wrap-reverse;
wrap과 같은 개념으로 아래가 아닌 위로 배치가 된다. (역순)

부모 요소에서 사용하는 것으로, 부모 요소와 자식 요소의 세로 사이즈가 정해진 상태에서 자식 요소의 수직에 대한 정렬을 진행할 때 사용한다. 부모 요소에는 방금 설명한 flex-wrap이 wrap으로 적용된 상태여야 한다.

align-content: stretch; (기본값)
부모 요소의 세로 크기가 자식 요소의 모든 세로 크기 합보다 크면 자식 요소들의 세로 사이즈가 알아서 균등하게 변경되며 부모 요소의 세로 사이즈에 꽉차게 세로로 배치된다. 만약 자식 요소의 세로 크기가 고정되어 있다면, 부모 요소의 위를 기준으로 균등하게 정렬된다. (flex-start와 같다)
align-content: flex-start;
부모 요소의 top을 기준으로 세로 정렬된다.
align-content: center;
부모 요소의 center을 기준으로 세로 정렬된다.
align-content: flex-end;
부모 요소의 bottom을 기준으로 세로 정렬된다.
align-content: space-around;
justify-content: space-around와 같은 개념이다. 부모 요소를 기준으로 안쪽 여백을 두고 세로로 일정 간격으로 정렬된다.
align-content: space-between;
justify-content: space-between와 같은 개념이다. 부모 요소를 기준으로 안쪽 여백 없이 세로로 일정 간격으로 정렬된다.

싱글벙글