오늘의 인사이트

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

nahee 2021. 11. 22. 22:37

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

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

 

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

그 동안 로 작업하면서 배운것들에 대해 알아보자. flexbox의 기초 flexbox의 기초를 다룬 좋은 글이 많기 때문에 여기서 다시 다룰 필요는 없을것 같다. 만약 flexbox에 대해 잘모르거나 잘 생각나지

blueshw.github.io

 

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

최근에 마크업 방식의 고민이 있습니다. flex기반으로 마크업을 했었는데 flex가 부분적으로 IE10을 지원하지않아요. 그래서... (1) IE10까지 지원되는 속성으로만 마크업 하기. (2) flex가 IE10, IE11에서

okky.kr

 

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

caniuse.com 에서 Flex를 검색하면 아래와 같은 내용을 확인할 수 있다. 거의 대부분의 브라우저에서 지원 가능하고 심지어 IE도 10과 11에서 부분 지원 되고 있다! 그치만... Notes 탭의 4번 항목을 보면

archuive.tistory.com

 

 

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

 

반응형