[CSS] Flex와 Grid

Flex (Flexible Box, Flexbox)

Flex Container 의 Flex Item 들을 설정된 속성에 따라 배치하는 레이아웃 배치 전용 기능

<style>
	.container{
  		display: flex; /* 이 설정을 통해 Flex Item 들이 flex 설정의 영향을 받음 */
  	}
  
</style>

...

<div class="container">
  <div class="item1"> ITEM1 </div>
  <div class="item2"> ITEM2 </div>
  <div class="item3"> ITEM3 </div>
  <div class="item4"> ITEM4 </div>
</div>

Flex Container

• 부모 div
• Flex의 영향을 받는 전체 공간.
• 속성
  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-tiems
  • align-content

Flex Item

• Flex Contianer의 직계 자식 div
• Flex Box의 설정에 따라 정렬되는 자식 요소들
• 속성
  • flex-basis
  • flex-grow
  • flex-shrink
  • flex
  • align-self
  • order
  • z-index

Flex Container에 적용하는 속성들

display

• 컨테이너에 display:flex 혹은 display: inline-flex 적용시 Flex Item 들은 가로 방향으로 배치된다.
  • display: flex 컨테이너가 Block 요소와 같은 성향(수직 쌓임)을 가짐.
  • display: inline-flex : 컨테이너가 Inline 요소와 같은 성향(수평 쌓임)을 가짐
• Flex Item width : 내부 요소의 width
Flex Item height : 컨테이너의 height

flex-direction

• Flex Item의 메인 축 (Main-Axis) 설정
  • row default : 행 방향
  • row-reverse : 역순 가로 방향
  • column : 열 방향
  • column-reverse: 역순 세로 방향

flex-wrap

• Flex Item의 줄 바꿈(줄 묶음) 설정
  • nowrap default : 줄바꿈 하지 않음
  • wrap : 줄바꿈
  • wrap-reverse : 아래에서 부터 쌓아가며 줄바꿈

flex-flow

• flex-direction과 flex-wrap을 동시에 설정.
• flex-flow: row wrap;
  

justify-content

• 메인 축 (Main-Axis)의 정렬 방법 설정

  • flex-start default : 메인 축 시작점 정렬

  • flex-end : 메인 축 끝점 정렬

  • center : 메인 축 가운데 정렬

  • space-between : 시작점과 끝점에 배치 후 균일한 간격으로 배치됨

  • space-around : 모든 Item이 동일한 간격으로 배치됨

  • space-evenly : 동일한 양 끝 간격과 사이 간격으로 배치됨

    

align-tiems

• 교차 축 (Cross-Axis)에서 Items의 정렬 방법 설정
  • stretch default : 교차 축을 채우기 위해 Items를 늘림
  • flex-start : 교차 축 시작점 정렬
  • flex-end : 교차 축 끝점 정렬
  • center : 교차 축 가운데 정렬
  • base-line : 텍스트 베이스라인 기준으로 정렬

align-content

• 교차 축 (Cross-Axis)의 정렬 방법 설정
• 따라서 flex-wrap: wrap; or flex-wrap: wrap-reverse; 설정이 되어있어야함
  • stretch default : 교차 축을 채우기 위해 Items를 늘림
  • flex-start : 교차 축 시작점 정렬
  • flex-end : 교차 축 끝점 정렬
  • center : 교차 축 가운데 정렬
  • space-between : 교차 축 시작점과 끝점에 배치 후 균일한 간격으로 배치됨
  • space-around : 교차 축 기준 모든 Item이 동일한 간격으로 배치됨

Flex Item에 적용하는 속성들

order

• Item의 순서를 설정
• 숫자가 클 수록 순서가 밀림 (음수 허용)

flex-grow

• Item의 증가 너비 비율을 설정
• default : 0
• 증가 가능한 총 너비를 설정한 flex-grow의 값의 비율 만큼 너비가 늘어남

<style>
	.item1 { flex-grow: 1; }
	.item2 { flex-grow: 1; }
	.item3 { flex-grow: 2; }
</style>

flex-shrink

• Item의 감소 너비 비율을 설정
• default : 1
• 0으로 설정한 경우 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 만들수 있다.
• 감소해야 하는 너비를 설정한 flex-shrink의 값의 비율 만큼 너비가 줄어듬

<style>
	.container { width: 700px; padding: 20px; }
	.item1 { flex-basis: 150px; flex-shrink: 1; }
	.item2 { flex-basis: 250px; flex-shrink: 2; }
	.item3 { flex-basis: 350px; flex-shrink: 3; }
</style>

flex-basis

• Item의 공간 배분 전 기본 너비를 설정
• default : auto
• auto일 경우 width height 등의 속성으로 너비를 설정할 수 있다.
• px em rem 등

flex

• flex-grow flex-shrink flex-basis를 설정하는 단축 속성
• default flex: 0 1 auto;
• flex-shrink flex-basis 생략 가능

align-self

• 교차 축 (Cross-Axis)에서 개별 Item의 정렬 방법 설정
• Conatinaer의 align-items 보다 우선함
  • auto default : Container의 align-items 속성을 상속받음
  • stretch : 교차 축을 채우기 위해 Items를 늘림
  • flex-start : 교차 축 시작점 정렬
  • flex-end : 교차 축 끝점 정렬
  • center : 교차 축 가운데 정렬
  • base-line : 텍스트 베이스라인 기준으로 정렬

참조

• https://developer.mozilla.org/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
• https://sharkcoder.com/layout/flexbox
• https://studiomeal.com/archives/197
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://heropy.blog/2018/11/24/css-flexible-box/
• https://velog.io/@sklove96/CSS-Flex-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90