1. Flex container속성-align-items
교차축(cross-axis)에서 items의 정렬 방법을 설정한다.
(items가 한 줄일 경우 많이 사용한다.)
💡주의할 점
주의할 점으로는 주로 한 줄이 경우 align-items를 사용한다.
2줄 이상일 경우 align-content속성을 우선하게 된다.
| 값 | 의미 | 기본값 |
|---|---|---|
| stretch | container의 교차 축을 채우기 위해 items를 늘림 | stretch |
| flex-start | items를 각 줄의 시작점(flex-start)으로 정렬 | |
| flex-end | items를 각 줄의 끝점(flex-end)으로 정렬 | |
| center | items를 가운데로 정렬 | |
| baseline | items를 문자 기준선에 정렬 |
baseline의 경우 요소가 아니라 그 안에 있는 문자를 기준으로 정렬하는 것이다.
2. Flex items 속성-order
1.flex items에 부여되는 속성
flex items에 부여되는 속성은 아래와 같다.
| 속성 | 의미 |
|---|---|
| order | flex item의 순서를 설정 |
| flex | flex-grow, flex-shrink, flex-basis의 단축속성 |
| flex-grow | flex item의 증가 너비 비율을 설정 |
| flex-shrink | flex item의 감소 너비 비율을 설정 |
| flex-basis | flex item의 (공간 배분 전) 기본 너비 설정 |
| align-self | 교차축(cross-axis)에서 item의 정렬 방법을 설정 |
2. order
- item의 순서를 지정한다.
- item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다.
- 음수가 허용된다.
| 값 | 의미 | 기본값 |
|---|---|---|
| 숫자 | item의 순서를 설정 | 0 |
💡사용법
order: 순서;
즉, order에서는 order의 숫자에 의해서 순서가 결정된다.
음수의 경우 앞으로 위치하고 양수의 숫자가 클수록 그 순서에 맞게 뒤로 밀린다.
만약 order로 같은 양수의 값(ex. order:1;)으로 같은 값을 갖는다면 이 이후에는 HTML의 구조 순서비교에 따라서 결정된다.
3. Flex items 속성-flex grow
flex-grow는 item의 증가 너비 비율을 설정한다.
1. 숫자가 크면 더 많은 너비를 갖는다.
2. item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
| 값 | 의미 | 기본값 |
|---|---|---|
| 숫자 | item의 증가 너비 비율을 설정 | 0 |
💡사용법
flex-grow:증가너비;
여기서 예를 들자면 3개의 컨테이너가 있다는 가정하에 우리는 부모요소의 너비가 몇인지 모르더라도,
flex-grow:1 2 1;이라고 되어있다면 총 1+2+1=4라는 것을 알 수 있음으로 1/4, 2/4, 1/4씩 각 컨테이너가 너비 비율을 가져간다는 것을 알 수 있다.
💡
만약 px값이 정해져있다면 container가 3개가 있다는 가정하에 아무리 flex-grow:1;, flex-grow:2;라는 값이 지정되어 있어도 1:2라고 하더라도 두배가 차이가 나는 것은 아니다.
그래서 엄밀하게 따지면 증가 너비를 다루는 것이다.
4. Flex items 속성-flex shrink
item이 감소하는 너비의 비율을 설정한다.
1. 숫자가 크면 더 많은 너비가 감소한다.
2. item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
| 값 | 의미 | 기본값 |
|---|---|---|
| 숫자 | item의 감소 너비 비율을 설정 | 1 |
💡사용법
flex-shrink:감소너비;
5. Flex items 속성-flex basis
item의 (공간 배분 전)기본 너비를 설정합니다.
1. 값이 auto일 경우 width, height 등의 속성으로 item의 너비를 설정할 수 있다.
하지만 단위의 값이 주어질 경우 설정할 수 없다.
| 값 | 의미 | 기본값 |
|---|---|---|
| auto | 가변item과 같은 너비 | auto |
| 단위 | px,em,cm등 단위로 지정 |
💡사용법
flex-basis:기본너비;
예시)
1. 만약 컨테이너가 세 개가 있고, 그 안에 flex-grow값으로 너비의 증가 비율을 설정한다고 할 때 flex-basis가 auto로 되어 있다면 컨테이너 안에 있는 텍스트의 너비를 제외한 나머지 여백을 가지고 계산을 하게 된다.
2. 만약 flex-basis의 기본값이 auto가 아닌 0으로 한다면, 각 컨테이너의 너비에 비율에 따라서 계산되게 된다.
6. Flex items 속성-flex
item의 너비(증가, 감소, 기본)를 설정하는 단축 속성이다.
| 값 | 의미 | 기본값 |
|---|---|---|
| flex-grow | item의 증가 너비 비율을 설정 | 0 |
| flex-shrink | item의 감소 너비 비율을 설정 | 1 |
| flex-basis | item의 (공간 배분 전)기본 너비 설정 | auto |
💡사용법
flex: 증가너비 감소너비 기본너비;
💡 예를 들어서 flex:1;이라고 하면 flex-grow의 경우 1로 설정되었고, 감소너비는 1로 기본적으로 설정되어 있지만, flex-basis의 경우 auto로 설정되어 있지 않다. 개별속성으로 했을 경우 기본값이 auto가 맞지만 단축속성을 사용할 경우 명시하지 않는다면 auto가 아닌 0이 들어간다.
즉, flex: 1 1 0;으로 설정된 것이다.
7. Flex items 속성-align-self
교차 축(cross-axis)에서 개별 item의 정렬 방법을 설정한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| auto | container의 align-item속성을 상속받음 | auto |
| stretch | container의 교차 축을 채우기 위해 item을 늘림 | |
| flex-start | item을 각 줄의 시작점(flex-start)으로 정렬 | |
| flex-end | item을 각 줄의 끝점(flex-end)으로 정렬 | |
| center | item을 가운데 정렬 | |
| baseline | item을 문자 기준선에 정렬 |
💡사용법
align-self:정렬방법;
즉, align-self: (center,flex-start, stretch)등을 통해서 각 컨테이너들이 내가 원하는 위치에 위치할 수 있도록 만든다.
