자식요소(item) 속성 살펴보기
Order
부모요소안의 자식요소들의 순서를 말하며 ...,-3,-2,-1,0,1,2,3,....
이렇게 숫자로 순서를 줄 수 있다.
기본값은 0이고 음수도 양수도 둘다 허용한다.
html구조를 바꾸는 것이 아닌 html구조는 그대로이며 보이는 순서만 바뀐 것이다.
flex-grow
자식요소의 너비증가비율을 나타낸다.
픽셀단위가 아닌 비율단위로 너비를 변경해준다.
기본값은 0이다. 속성은 50%이렇게가 아닌 1,2,3 이런 숫자로 나타낸다.
자식요소들의 flex-grow의 수치를 다 더해서 전체 너비비율의 총합을 알아내고
각 자식요소의 비율 / 너비비율 총합으로 계산해서 너비비율을 정한다.
flex-shrink
자식요소의 너비감소비율을 나타낸다.
픽셀이나 고정적인 수치를 주면 작동하지 않는다.
기본값은 1이다.
아래의 Codepen에서는 고정너비를 줄 수 없어서 미리 flex-basis를 가져다 썼다.
100px을 감소시켰지만 같은 크기이지만 감소비율이 다르기에 감소되는 수치도 다르다.
감소비율에 대한 계산식은
첫번째 item은 flex-basis(200px) - ( 감소된수치 100px 3/2 )
두번째는 200px - (100px3/1)이다. 이렇기 때문에 감소할때 너비가 다르게 적용된다.
flex-basis
자식요소의 공간의 기본너비를 지정한다.
단위를 포함할 수 있으며 기본값은 auto이다.
실제로 flex layout을 기반으로 스타일을 구사하면 width가 아닌 basis를 쓰게 되는데.
width가 없는 경우에는 flex-grow가 생각보다 다르게 먹힌다.
아래의 코드를 참고하면 이해가 쉬울 것이다.
width 유무에 따라서 같은 비율의 flex-grow인데 다르게 나온다.
쉽게 말하자면 width나 flex-basis가 없다면 내부 콘텐츠의 너비를 기준으로 flex-grow 수치가 붙으며 width, flex-basis가 있다면 너비기준으로 flex-grow수치가 붙는다.
flex 단축속성
부모요소에서는 flex-flow 가 단축속성이였다면
자식요소에서는 flex 가 단축속성이다.
item{flex:1 1 200px /* 증가너비(grow) 감소너비(shrink) 기본너비(basis) */}
item{flex:1 20px /* 증가너비 감소너비이지만 단위가 붙으면 기본너비 */}align-self
교차축(cross-axis)에서 자식요소의 정렬방법을 설정한다.
부모요소의 align-items 로 자식요소를 정렬하지만 그 이후에 자식요소 중 어느 한부분만 재정렬 하고 싶을 때 쓰인다.
| 값 | 내용 | 기본값 |
|---|---|---|
| auto | 부모요소의 align-items의 속성을 상속받음 | auto |
| stretch | 자식요소의 교차축을 채우기위해 늘림 | |
| flex-start | 교차축의 시작점으로 정렬 | |
| flex-end | 교차축의 마지막점으로 정렬 | |
| center | 교차축의 중앙으로 정렬 | |
| baseline | 문자 기준선으로 정렬 |
뒷이야기
여러 디바이스가 나오면서 개발부분에서 변화만 일어난 것이 아니고 퍼블리셔영역에서도 변화가 일어나고 바뀐걸 볼 수가 있었다.
table로 html소스를 배치하던 때 block 단위의 박스형태로 디자인하면서 여러 사람들이 힘겨워했다.
이 포스트를 읽고 이제 박스형태에서 flex형태로 변하는 시점에서 유연하게 적응하길 바란다.
