Flex - 부모요소 속성

🍫 CSS flexbox 가 뭐여?

지난 시리즈에서 간단하게 다뤘지만, flexbox가 뭔지 다시 한 번 짚고 넘어가자.

CSS flexbox
기존의 float, position 등의 속성을 사용해서 HTML 요소의 배치, 정렬, 방향, 크기 등을 조절하는 대신, 좀 더 쉽고 효율적으로 조절할 수 있는 방법을 지원하는 CSS3 레이아웃 제작 방식이다. 특히 반응형 레이아웃을 만들기 쉽다.

오늘은 Flex의 부모요소에 쓰는 속성을 정리하려고 한다.

🍫 display : flex;

• Flex 방식의 속성들을 사용하려면 기본적으로 부모요소에 display : flex;를 써줘야한다.

🍫 justify-content (flex-direction : row 라고 가정)

• justify-content : center : 여러개의 자식요소가 좌우 간격 없이 수평 중앙 정렬
• justify-content : flex-start (default) : 여러개의 자식요소가 부모요소의 수평 좌측으로 정렬
• justify-content : flex-end : 여러개의 자식요소가 부모요소의 수평 우측으로 정렬
• justify-content : space-around : 여러개의 자식요소끼리 좌우 간격을 일정하게 배분하여 수평 중앙에 정렬
  
• justify-content : space-between : 여러개의 자식요소를 부모요소의 좌우 여백 없이 꽉 채우면서 중앙에 배치
  

🍫 align-items (flex-direction : row 라고 가정)

• align-items : center : 여러개의 자식요소가 좌우 간격 없이 수직 중앙 정렬
• align-items : stretch (default) : 자식요소에 높이값이 없으면 부모요소의 높이 값에 맞게 자동으로 100% 가득 채움
• align-items : flex-start : 여러개의 자식요소가 부모요소의 수직 상단으로 정렬
• align-items : flex-end : 여러개의 자식요소가 부모요소의 수직 하단으로 정렬
• align-items : space-around : 여러개의 자식요소끼리 상하 간격을 일정하게 배분하여 수직 중앙에 정렬
• align-items : space-between : 여러개의 자식요소를 부모요소의 상하 여백 없이 꽉 채우면서 수직 중앙에 배치
  align-items : stretch 예시
  

🍫 flex-wrap

• flex-wrap : nowrap (default) : 부모요소가 줄어들 때 자식요소의 wrap(줄바꿈) 없이 자식요소의 너비값을 줄임
  
• flex-wrap : wrap : 부모요소가 줄어들 때 자식요소의 너비를 줄이지 않으면서 줄바꿈을 시킴
  

🍫 flex-flow

• flex-direction과 flex-wrap을 동시에 적어줄 수 있는 축약형 속성이다.
• flex-flow : row nowrap 이와 같이 앞에 direction을 뒤에 wrap속성을 쓴다.

🍫 align-content

부모요소에 wrap 속성이 있는 경우 부모요소가 줄어들면 자식요소가 너비를 유지하면서 줄바꿈을 하게 되는데, 그때 어떤 형태로 줄바꿈을 시킬 것인지 설정하는 속성이다.
align-items와 원리가 완전 똑같다.

• align-content : center : 여러개의 자식요소가 좌우 간격 없이 수직 중앙 정렬
• align-content : stretch (default) : 자식요소에 높이값이 없으면 부모요소의 높이 값에 맞게 자동으로 100% 가득 채움
• align-content : flex-start : 여러개의 자식요소가 부모요소의 수직 상단으로 정렬
• align-content : flex-end : 여러개의 자식요소가 부모요소의 수직 하단으로 정렬
• align-content : space-around : 여러개의 자식요소끼리 상하 간격을 일정하게 배분하여 수직 중앙에 정렬
• align-content : space-between : 여러개의 자식요소를 부모요소의 상하 여백 없이 꽉 채우면서 수직 중앙에 배치