flex에 적용할 수 있는 속성
- 아이템에 적용
- 컨테이너에 적용
> 1.아이템에 적용할 수 있는 속성
flex: 숫자;속성
컨테이너의 너비를 100이라고 했을 때, 해당 아이템이 차지할 면적의 비율을
정하는 속성.
해당 속성은 3가지 속성이 요약된 속성이다!!
flex-basis
flex-basis 속성은 아이템의 기본 크기를 설정한다.
이 때 말하는 기본 크기란, flex-direction이 row일 때는 너비,
column일 때는 높이를 의미한다.
기존의 레이아웃에서는 아이템의 너비를 width, 높이를 height를 이용해 설정했었지만,
flex 레이아웃에서는 flex-basis 속성으로 너비와 높이를 설정게 된다.
flex-grow
flex-grow 속성은 아이템이 얼마나 커질 수 있는지를 비율로 정하는 속성이다.
0일 경우에는 기본크기에서 절대 늘어나지 않고,
0보다 큰 값을 경우에는 다름 아이템과 flex-grow 비율만큼 늘어난다.
flex-shrink
flex-shrink는 flex-grow와 정 반대의 속성이다.
아이템이 얼마나 작아질 수 있는지를 비율로 정하는 속성!
0일 경우에는 기본 크기보다 절대 작아지지 않고,
0보다 큰 값을 경우에는 다른 아이템과 flex-shrink 비율만큼 늘어난다.
flex
위의 세가지를 한번에 쓸 수 있는 속성
각각 flex-grow, flex-shrink, flex-basis 순으로 지정이된다.
위의 4가지 속성은 실전에서 여러번 사용해보아야 감이 잡힐 것 같다.
> 2.컨테이너에 적용할 수 있는 속성
flex-direction
flex 레이아웃의 방향 설정
flex-direction을 설정하지 않을 경우, 기본값은 row
row일 경우 가로로 쌓이는 flex 레이아웃,
column일 경우 가로로 쌓이는 flex 레이아웃이다.
flex-wrap
flex 아이템들이 많아지거나 커져서 컨테이너의 크기를 넘어가게 되면 어떻게 될까?
이때 사용한은 속성이 flex-wrap이다.
flex-wrap 속성을 사용해 자동으로 여러줄이 생성되게끔 만들 수 있다.
wrap : 컨테이너 크기를 넘어갈 경우 다음 줄로 표시
nowrap : 컨테이너 크기를 넘어가더라도 다음 줄로 표시하지 않음
wrap-reverse : 컨테이너 크기를 넘어갈 겯ㅇ우 마지막 아이템부터 거꾸로 여러줄 표시
align-items
수직축 정렬이란?
flex-direction에서 설정한 flex 레이아웃의 축에 수직인 방향의 정렬을 의미한다.
align-items 속성은 수직축으로 정렬할 수 있는 속성이다.
주로 사용되는 속성 값 5가지
center, flex-start, flex-end, stretch, baselink
center ▶ 수직축의 가운데로 정렬
flex-start ▶ 수직축의 시작점에 정렬
flex-end ▶ 수직축의 끝에 정렬
stretch ▶ 수직축 방향으로 쭉~ 늘어나게 정렬
baseline ▶ 텍스트 베이스라인 기준으로 정렬
justify-content
수평축 정렬이란?
flex-direction에서 설정한 flex 레이아웃의 축에 수평인 방향의 정렬을 의미한다.
justify-content 속성은 수평축으로 정렬할 수 있는 속성이다.
주로 사용되는 속성 값 6가지
center, flex-start, flex-end, space-between, space-around, space-evenly
center ▶ 수평축의 가운데 정렬
flex-start ▶ 수평축의 시작점에 정렬
flex-end ▶ 수평축의 끝에 정렬
space-between ▶ 아이템들의 사이에 간격을 만들어 정렬
space-around ▶ 아이템들의 둘레에 간격을 만들어 정렬
space-evenly ▶ 아이템들의 사이와 양 끝에 간격을 만들어 정렬
