flex

CSS에서 flex 속성은 기존의 float, position, display 속성을 사용해서 HTML 요소의 배치, 정렬, 방향, 순서, 크기를 조절하는 대신에 좀 더 쉽고 효율적으로 조절할 수 있는 방법을 지원하는 CSS3 레이아웃 제작 방식이다.

속성 종류

부모 요소에 쓰는 속성

• display: flex / inline-flex
• flex-direction : row / column
• flex-wrap : wrap / nowrap / wrap-reverse
• justify-content : flex-start / flex-end / center / space-between / space-around
• align-itmes : flex-start / flex-end / center / baseline / stretch
• align-content : flex-start / flex-end / center / space-between / space-around / stretch

자식 요소에 쓰는 속성

• flex : 숫자
• order : 숫자
• align-self : auto / flex-start / flex-end / center / baseline / stretch

부모 요소 속성 정리

flex-direction

해당 속성은 요소들을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정하는 속성이다.

• row : 정방향, 가로 배치
• row-reverse : 역방향, 가로 배치
• column : 정방향, 세로 배치
• column-reverse : 역방향, 세로 배치

flex-wrap

해당 속성은 요소들의 줄바꿈 허용 여부를 지정하는 속성이다.

• nowrap(default) : 부모요소의 너비 값이 줄어들어도 자식요소의 너비를 줄이면서 가로 배치를 유지한다.
• warp : 자식요소들의 총 넓이가 부모요소의 넓이를 초과하면, 초과하는 부분의 요소들은 다음 줄로 줄바꿈 한다.
• wrap-reverse : wrap과 동일하지만, 요소들을 역순으로 배열한다.

justify-content

해당 속성은 메인축 방향으로 요소들을 정렬하는 속성이다.

• justify-content: start; : 요소들을 시작점으로 정렬한다.
• justify-content: center; : 요소들을 가운데로 정렬한다.
• justify-content: space-between; : 요소들의 사이에 균일한 간격을 만들어준다.
• justify-content: space- around; : 요소들의 둘레에 균일한 간격을 만들어준다.
• justify-content: space- evenly; : 요소들의 사이와 양 끝에 일정한 간격을 만들어준다.
  

align-items

해당 속성은 교차축 방향으로 요소들을 정렬하는 속성이다.

• align-items: center; : 중앙 정렬
• align-items: flex-start; : 상단 정렬
• align-items: flex-end; : 하단 정렬
  
• align-items: stretch; : 자식요소에 높이 값이 없으면 부모요소의 높이 값에 맞게 자동으로 100% 가득 채움. (1번과 3번은 높이 값이 있어서 늘어나지 않음)
  

자식 요소 속성 정리

flex-grow

해당 속성은 플렉스 자식요소의 증가 너비 비율을 설정하는 속성이다.
예를 들어, 요소가 3개이고 각각 flex-grow 1,2,1을 주었다면 비율에 따라 25%(1/4), 50%(2/4), 25%(1/4)가 배정 된다.

.child1 {
    flex-grow: 1;
}
.child2 {
    flex-grow: 2;
}
.child3 {
    flex-grow: 1;
}

flex-shrink

해당 속성은 플렉스 자식요소의 감소 너비 비율을 설정하는 속성이다.
flex-grow와 동일한 비율로 감소된다.

flex-basis

해당 속성은 플렉스 자식요소의 공간 배분 전 기본 너비를 설정하는속성이다.

.child1 {
    flex-basis: 100px;
}
.child2 {
    flex-basis: 200px;
}
.child3 {
    flex-basis: 300px;
}