[CSS3] Flex (Flexible Box)에 대하여

이전 근무지에서 ie9까지 맞춰야하기 때문에 이제껏 써보지 못한 (ㅠ.ㅠ)

CSS3의 Flex에 대하여 내가 이해하기 쉽도록 정리해보자!

 

먼저 큰 틀에서는 부모/자식으로 나누어본다.

 

부모 : .container => flex container
자식 : .item => flex item

 

출처 : https://studiomeal.com/archives/197

 

부모속성	flex-direction : 배치 방향 설정	flex-wrap : 줄바꿈 처리 설정	flex-flow : flex-direction + flex-wrap
	justify-centent : 가로축 방향 정렬	align-items : 세로축 방향 정렬 (전체 아이템에 대하여)	align-content : 여러 행 정렬

 

1) flex-direction : 배치 방향 설정

.container{
   flex-direction:
   
      row; (가로 방향 / 기본)
      
      row-reverse; (가로 역순 방향)
      
      column; (세로 방향)
      
      column-reverse; (세로 역순 방향)
}

 

2) flex-wrap : 줄바꿈 처리 설정

.container{
   flex-wrap:
   
      nowrap; (컨텐츠가 넘쳐도 줄바꿈 안함 / 기본)
      
      wrap; (컨텐츠가 넘치면 줄바꿈 처리)
      
      wrap-reverse; (컨텐츠가 넘치면 줄바꿈 처리, 아이템 역순 배치)
}

 

3) flex-flow : flex-direction + flex-wrap를 한꺼번에 지정

// 예시

.container{
   flex-flow: row wrap;
}

 

4) justify-content : 가로축 방향 정렬

.container{
   // flex-direction: row or row-reverse;일 때 설정가능.
   justify-content:
   
      flex-start; (아이템들을 시작점으로 정렬 / 기본)
      
      flex-end; (아이템들을 끝점으로 정렬)
      
      center; (아이템들을 좌우기준 가운데정렬)
      
      space-between; (아이템들의 사이에 좌우기준으로 균일한 간격을 만들어 줌.)
      
      space-around; (아이템들의 둘레에 좌우기준으로 균일한 간격을 만들어 줌.)
      
      space-evenly; (아이템들의 사이와 좌우기준으로 양끝에 균일한 간격을 만들어 줌.)
}

 

5) align-items : 세로축 방향 정렬

.container{
   // flex-direction: column;일 때 설정가능.
   align-items:
   
      stretch; (아이템들이 수직방향 끝까지 늘어남. / 기본)
      
      flex-start; (아이템들을 시작점으로 정렬)
      
      flex-end; (아이템들을 끝으로 정렬)
      
      center; (아이템들을 상하기준으로 가운데정렬)
      
      baseline; (아이템들을 텍스트 베이스라인을 기준으로 정렬)
}

 

[상하좌우 가운데정렬]

   justify-content: center;

   align-items: center;

 

6) align-content : 여러행 정렬

.container{
   // flex-wrap: wrap;일때 설정가능.
   align-content:
   
      stretch; (컨텐츠 안의 아이템들의 열을 기준으로 동일한 높이값 정렬, 컨텐츠 높이가 꽉참. / 기본)
      
      flex-start; (아이템들을 시작점으로 정렬)
      
      flex-end; (아이템들을 끝점으로 정렬)
      
      center; (아이템들을 상하기준으로 가운데정렬)
      
      space-between; (아이템들의 사이에 상하기준으로 균일한 간격을 만들어 줌.)
      
      space-around; (아이템들의 둘레에 상하기준으로 균일한 간격을 만들어 줌.)
      
      space-evenly; (아이템들의 사이와 상하기준으로 양끝에 균일한 간격을 만들어 줌.)
}

 

 

---

자식속성	flex-grow (default: 0) : 아이템이 flex-basis의 값보다 커질 수 있는지를 결정	flex-shrink (default: 1) : 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정	flex-basis (default: auto) : Flex 아이템의 기본 크기 설정
	flex : flex-grow, flex-shrink, flex-basis의 축약형	align-self : 해당 아이템의 수직축 방향 정렬	order : 각 아이템들의 시각적 나열 순서 결정

 

1) flex-grow : 아이템이 flex-basis의 값보다 커질 수 있는지를 결정

속성값이 0이면 flex container가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지됨.

속성값이 1 이상이면 flex container를 채우도록 flex item이 원래의 크기보다 커지며 빈 공간을 메움.

 

출처 : https://d2.naver.com/helloworld/8540176

.item{
   flex-grow: 1;
}

숫자의 의미 : 여백 부분을  flow-grow에 지정된 숫자의 비율로 나눠가짐.

 

2) flex-shrink : 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정

.item{
   flex-shrink: 1;
}

속성값이 0이면 flex container의 크기가 flex item의 크기보다 작아져도 flex-item의 작아지지 않고 원래 크기로 유지됨.

속성값이 1 이상이면 flex container의 크기가 flex item이 크기보다 작아질 때 flex-item의 크기가 flex-container의 크기에 맞게 줄어듬.

 

출처 : https://d2.naver.com/helloworld/8540176

 

3) flex-basis : flex 아이템의 기본 크기를 결정

.item{
   flex-basis:
   
      auto; (컨텐츠 가로/세로값 / 기본)
      
      0; (아이템들을 시작점으로 정렬)
      
      50%;
      
      100rem;
      
      content;
}

 

출처 : https://d2.naver.com/helloworld/8540176

좌측 그림처럼 나오려면 flex-grow: 1; 이여야 한다.

 

4) flex : flex-grow, flex-shrink, flex-basis의 축약형

.item{
   flex:
      1; (flex-grow: 1; flex-shrink: 1; flex-basis: 0;)
      // 의미 : flex containter 크기의 따라 flex item 크기도 커지거나 작아진다는 의미.
}

 

5) align-self : 해당 아이템의 수직축 방향 정렬

기본적으로 align-items 설정을 상속받음. 그러나 우선권이 align-items 보다 높음.

.item{
   align-self:
   
      auto; (기본)
      
      stretch;
      
      flex-start;
      
      flex-end;
      
      center;
      
      baseline;
}

 

6) order : 각 아이템들의 시각적 나열 순서 결정, 작은 숫자일수록 먼저 배치됨.

 

 

---

참고

studiomeal.com/archives/197

d2.naver.com/helloworld/8540176