[CSS] 이제 FLEX 하자

지금껏
배웠던 position의 relative, abolute 값을 이용해서 위치를 잡아주곤 했다. 상당히 번거롭고 원시적인 방법이었다.

그런데 . . .
flex를 배운 이상 정렬따위 무섭지 않게 되었는데,,,

flex

mdn /
일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다.

1차원 레이아웃 모델!

먼저

두개의 축을 생각해야 하는데
행으로 쌓이는 Main axis와 열로 쌓이는 Cross axis다.
주축과 교차축!
주축에 수직되는 축을 교차축이라고 한다.

일분코딩님은 어묵꼬치로 비유하셨는데
나는 빨래집게라고 생각했다.
빨래줄이 메인 axis라고 생각하면 안의 내용물들을 빨래집게로 찝어서 널은 느낌?!

기본으로 이 축 개념을 알아야 flex를 이해할 수 있다.

flexbox가 쓰기 방법(writing mode)을 가정하지 않는다는 것은 상당히 중요합니다. 과거의 CSS는 왼쪽에서 오른쪽으로 향하는 가로 방향의 쓰기 방법에 치우쳐 있었습니다. 하지만 현대의 레이아웃은 다양한 쓰기 방법을 포괄해야 하므로, 더이상 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다. 새 라인이 항상 아래에 쌓인다고 가정하지도 않습니다.

basis shrink grow

basis

자식요소에 사용합니다!
flex item 들의 크기를 지정합니다. width, height와 다른점은 axis 방향에 따라 달라진다는 것 그리고 내부의 컨텐츠에 따른 유연한 크기입니다. 기본값은 auto이며 auto일 때는 width, height 값을 사용합니다.

만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시됩니다.

flex-basis 속성값은 content 키워드를 사용하거나, <'width'>를 나타내는 단위를 사용합니다.
음수값은 유효하지 않습니다. 주의!

/* <'width'> 지정 */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;

/* 전역 값 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

flex-grow

자식요소에 사용합니다!
flex-grow값은 얼마나 늘어날 수 있을지에 대한 값을 주는 속성이다.
양수로 지정하면 flex 항목별로 주축 방향 크기가 위에서 본 flex-basis 값 이상으로 늘어날 수 있게 된다.
모든 flex-grow 값을 1로 지정하면 늘렸을 때 사용가능 한 공간이 각 항목에 동일하게 분배되고 분배되는 값만큼 사이즈를 늘려 공간을 차지하게 된다.
만약 첫 항목에 2, 나머지 두 개에 1로 지정함녀 2:1:1 비율이므로 100px, 50px, 50px 이렇게 분배된다.

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

그렇다면 줄이는 건?

flex-shrink