[CSS] CSS Flex Container (플렉스 박스 flex box)

float로 아이템 정렬을 컨트롤했었는데 이번 기회에 플렉스 기능에 대해 정리하고 알아두고자 기록함.
flex 속성은 IE 11부터 지원 가능. 하지만 IE를 대응해야 한다면 플렉스 사용을 고려해야 한다고..(셀 수 없는 많은 버그가 존재.)

+추가) IE관련 버그는 플러그인을 써서 해결할 수 있는 것 같다.

[CSS] flexbox를 사용하며 배운것들 (중급)

OKKY | 마크업 IE이슈 다들 어떻게 해결하세요?

[크로스브라우징] Flex 쓰기 전에 알아두면 좋은 것들, 알려진 이슈

 

---

 

CSS flex container 기본 속성 정리

<div class="container">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>  
</div>

다크 그레이 영역이 container, 흰 박스가 item.

. container에 display: flex로 지정. 

.container {
  display: flex;
}

.container에 지정 가능한 속성

• flex-direction
  • flex-direction: column; (item 세로정렬)
  • flex-direction: column-reverse; (item 세로 정렬 역순으로)
  • flex-direction: row;(item 좌측 가로 정렬)
  • flex-direction: row-reverse; (item 우측 가로 정렬 역순)
• flex-wrap 
  • flex-wrap: wrap;(아이템을 감싸는 전체 컨테이너가 줄어들 경우 아이템 줄 바꿈)
  • flex-wrap: nowrap;(아이템을 감싸는 전체 컨테이너가 줄어들 경우 아이템 가로 값이 줄어듬_절대적으로 한 줄로 표현하고 싶을 때 사용.)
  • flex-wrap: wrap-reverse;(아이템을 감싸는 전체 컨테이너가 줄어들 경우 아이템 줄 바꿈_역순 정렬_상단에 빈 공간 생김)
• flex-flow 
  • flex-flow: row wrap; ( flex-direction과 flex-wrap 속성을 모두 설정하기 위한 약식 속성)
• justify-content 플렉스 아이템 수평 정렬
  • justify-content: center; (전체 컨테이너 폭이 늘거나 줄어도 아이템은 항상 가운데 정렬)
  • justify-content: flex-start; (전체 컨테이너 폭이 늘거나 줄어도 아이템은 항상 컨테이너 시작 부분에 정렬)
  • justify-content: flex-end; (전체 컨테이너 폭이 늘거나 줄어도 아이템은 항상 컨테이너 끝 부분에 정렬)
  • justify-content: space-around; (전체 컨테이너 폭이 늘거나 줄어도 아이템 가로 사이와 아이템 양쪽 끝 가로 공백 유지)
  • justify-content: space-between;(전체 컨테이너 폭이 늘거나 줄어도 아이템 가로 사이 공백 유지)
• align-items 플렉스 아이템 수직 정렬
  • align-items: center;(아이템 세로 중간 정렬)
  • align-items: flex-start;; (컨테이너 윗부분을 시작점으로 정렬)
  • align-items: flex-end;(컨테이너 아랫부분을 시작점으로 정렬)
  • align-items: stretch; (아이템 전체 높이를 같게 설정)
  • align-items: baseline;(아이템 안에 개별 속성을 지닌 h1, h3, h6등 태그를 사용했을 때 해당 글자 기준으로 정렬_아이템을 감사는 박스 기준 정렬이 아닌, 아이템 내부 요소 기준 정렬)
• align-content
  • align-content: space-around;(전체 컨테이너 폭이 늘거나 줄어도 아이템 세로 사이와 아이템 양쪽 끝 세로 공백 유지. 마지막엔 넘침)
  • align-content: space-between;(전체 컨테이너 폭이 늘거나 줄어도 아이템 세로 사이 공백 유지)
  • align-content: stretch; (세로 영역 균등하게 스트레치 돼서 정렬)
  • align-content: center;(컨테이너 세로 중앙 정렬)
  • align-content: flex-start;(컨테이너가 줄어들면 아이템이 컨테이너 세로 시작 기점으로 줄 바꿈)
  • align-content: flex-end;(컨테이너가 줄어들면 아이템이 컨테이너 세로 끝 기점으로 줄 바꿈)

 

※ 플렉스 항목을 완벽히 가운데 정렬하고 싶을 때

.container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

 

※ 플렉스 박스 컨테이너 속성

align-content	align-items와 유사하지만 플렉스 아이템을 정렬하는 대신 플렉스 라인을 정렬
align-items	항목이 교차 축에서 사용 가능한 모든 공간을 사용하지 않을 때 플렉스 항목을 수직으로 정렬
display	HTML 요소에 사용되는 상자 유형을 지정
flex-direction	플렉스 컨테이너 내부 항목의 방향 지정
flex-flow	flex-direction 및 flex-wrap의 약식 속성
flex-wrap	하나의 플렉스 라인에 공간이 충분하지 않은 경우 플렉스 항목을 줄 바꿈할지 여부를 지정
justify-content	항목이 기본 축에서 사용 가능한 모든 공간을 사용하지 않을 때 플렉스 항목을 수평으로 정렬

 

 

※ 참고한 사이트

https://www.w3schools.com/css/css3_flexbox_container.asp

https://studiomeal.com/archives/197