CSS_flex-box_22.04.19(Tue)

Flex items

order : Flex Item의 순서를 설정

flex-grow : Flex Item의 증가 너비 비율을 설정

flex-shrink : Flex Item의 감소 너비 비율을 설정

flex-basis : Flex Item의 공간 배분 전 기본 너비를 설정

flex : flex-grow, flex-shrink, flex-basis의 단축 속성

align-self : 교차 축에서 Item의 정렬 방법을 설정

order

Item들의 순서를 설정.

- 숫자가 클 수록 순서가 밀림.

- 음수가 허용됨

 

flex-grow

- Item의 증가 너비 비율을 설정

- 숫자가 크면 더 많은 너비를 가짐..

숫자 Item의 증가 너비 비율 (기본값 0)

flex-shrink

- Item의 감소 너비 비율을 설정

- 숫자가 크면 더 많은 너비가 감소함.

숫자 Item의 증가 너비 비율 (기본값 1)

flex-basis

- Item의 공간 배분 전 기본 너비를 설정.

- 값이 auto일 경우 width 등의 속성으로 너비를 설정할 수 있음.

- 하지만 flex-basis를 설정하면 자체 width값이 무시됨.

auto 가변 Item과 같은 너비 (기본값)

단위 px, em 등 단위로 지정

flex

- flex-grow, flex-shrink, flex-basis의 단축 속성

- flex-grow를 제외한 속성은 생략 가능

- 생략시 flex-basis의 경우 기본값이 auto가 아닌 0으로 적용되는 것에 주의할 것!

 

align-self

교차 축(cross-axis)에서 개별 Item의 정렬방법을 설정.

- align-items속성은 container내부의 모든Item에 대해 정렬 방법을 설정하지만 이 속성은 일부 Item만 설정할 때 사용.

- align-items 속성보다 우선함.

auto : container의 align-items를 상속 (기본값)

stretch : container의 교차 축을 채우기 위해 Item을늘림

flex-start : Item을 시작점부터 정렬

flex-end : Item을 끝점부터 정렬

center : Item을 가운데 정렬

baseline : Item을 문자 기준선에 정렬

item 박스 b에 order : 2; 를 넣었다. b가 맨 뒤로 간것을 확인 할 수 있음. flex-direction : row; 기준

 

* order 기본 값이 0일 때 음수를 넣으면 앞으로 0보다 큰수를 넣으면 뒤로 간다.

 

flex-grow 사용 전 그림

 

flex-grow를 1 : 2 : 1 비율로 사용한 그림.                                       * 그런데 딱 봐도 가운데 박스가 2배가 되어 보이지 않는다. 이유는 뭘까?

 

그래서 실제 px 을 확인해 봤다. 첫번째 flex-grow : 1 ; 을 적용한 박스의 크기.

 

두번째 flex-grow : 2 ; 을 적용한 박스의 크기.

실제 px을 확인 해보니 가운데 flex-grow : 2; 를 적용한 박스가 1을 적용한 박스의 1.5배 정도의 px로 나타났다.

 

flex-basis 가 기본값 auto로 되 어있어 flex-grow width에 영향을 주었다.

 

1 : 2 : 1 의 flex-gorw 효과를 보려면 첫번재 방법으로 item에서 설정한 width를 기본 값으로 변경 시키는 것이 있다.

 

width를 기본값으로 바꾼 후 실제 px 확인 첫번째 박스.

 

width를 기본값으로 바꾼 후 실제 px 확인 두번째 박스.

 

item width를 기본 값으로 바꾸지 않고 1 : 2 : 1 의 비율을 나타내는 2번째 방법은 flex-basis 를 0 으로 만들어 주는 것이다.

 

단축속성으로 flex : 1 , 2, 1 을 넣어 주는 것은 flex-grow 1 , 2, 1 과 flex-basis를 각각 0으로 만들어 준것과 같다.

 

flex-shrinks 는 브라우저창을 줄였을 때 박스의 감소 비율을 조정 해준다.

 

1번 박스에 flex-shrink : 2 ; 를 2번 박스에 flex-shrink : 1; 넣어줬다.                                                    *2 : 1비율로 감소되는 크기가 달라진다.

 

align-self를 2번(B)와 4번(D)에 넣어 줄 예정이다.

 

align-self로 B는 flex-start 를 D는  stretch를 사용하였다. A,C,E에 영향 없이 개별적으로 B와D의 박스가 움직인 것을 확인 할 수 있다.