align-items, align-content와 비슷하므로 자세한 설명은 생략. 말 그대로 self니까 부모가 아니라 자기 자신, box 하나 단위로 정렬한다는 게 가장 큰 차이점이다.
align-self: auto; (기본값) 1, 2, 4, 5번 box는 위치가 고정돼 있다. 가운데 3번 box 하나의 변화만 보면 된다.align-self: flex-start;align-self: flex-end;align-self: center;align-self: baseline;align-self: stretch;
flex-grow
flex-grow는 box가 main axis 방향으로 늘어나는 정도를 의미한다. 각 box의 기본값은 0이며 보통 자연수 단위로 조정한다.1번 box에 flex-grow: 1;을 적용하면 남는 공간을 1번 box 혼자서 다 채운다.2번에도 flex-grow: 1;을 적용하면 남는 공간을 1번과 2번이 1:1의 비율로 나눠 갖는다.여기서 5번이 flex-grow:5;가 되면 1번, 2번, 5번은 남는 공간을 각각 1:1:5 비율로 가져간다.
flex-shrink
flex-grow는 box가 main axis 방향으로 줄어드는 정도를 의미한다. 각 box의 기본값은 1이며 보통 자연수 단위로 조정한다.3번 box에 flex-shrink: 3;을 적용했다. 해당값은 flex-grow처럼 상대적인 축소비인거지, 3번의 width가 다른 box의 1/3이 되는 게 아니다.4번에 flex-shrink: 10;을 적용했다. 참고로 flex-shrink: 0;이면 box의 최소 width가 flex-basis값이 된다(더 안 줄어들고 잘림).
flex-basis
grow나 shrink되기 전 최초 크기. flex-direction이 column이 되면 가로-세로가 뒤바뀐다.
flex-basis: auto;는 기본값.flex-basis: 0;은 width를 최소화하고 box 내 텍스트를 개행한다.flex-basis: 200px;은 이미 지정한 box의 width: 100px;보다 우선한다.
flex (1)
flex를 잘 사용하면 flex-grow, flex-shrink, flex-basis 모두 코드 한 줄 안에 지정할 수 있다.
flex: flex-grow값 flex-shrink값 flex-basis값; 순으로 설정하면 된다.flex-basis값이 0(기본값)이면 box의 width를 무시하고 부모 전체 width를 flex-grow 수치로 나눈다.
flex (2)
flex: none;과 flex: initial; 그리고 flex: auto;
flex: none;과 flex: initial;은 여백을 채우지 않는다는 공통점을 가진다.부모의 width가 줄어들면 initial의 width도 줄어든다. 반면에 none은 잘려서 표현될지라도 width를 줄이지 않는다.flex: auto;는 자동으로 여백을 균등하게 채운다.부모의 width가 줄어들면 auto의 width도 같이 줄어든다.flex: auto;는 여백을 채우고, flex: none;은 아무런 변화가 없다.부모의 width가 줄어들면 auto의 width도 줄어든다. none은 width를 줄이지 않는다.flex: auto;는 여백을 채우고, flex: initial;은 여백을 채우지 않는다.부모의 width가 줄어들면 처음에는 auto의 width만 줄어들다가auto와 initial의 width가 같아지면auto와 initial 모두 width가 줄어든다.
HTML을 바꿀 수 없을 때, order를 사용하면 임의로 순서를 바꿀 수 있다. 기본값은 order: 0;이며 정수를 이용해 우선 순위를 정한다.3번 box는 order: 1;이며 나머지 box들은 기본값(0)이다. order는 main axis 방향으로 box들을 order값(오름차순)으로 정렬한다.2번 box에 order: 2;를 적용했다. order값 [0, 0, 0, 1, 2] 순으로 정렬하기 때문에 box 배열은 1번-4번-5번-3번-2번 순이 된다.4번 box에 order: -1;을 적용했다. [-1, 0, 0, 1, 2] 순으로 정렬하면 4번-1번-5번-3번-2번 순이 된다.
(번외) Flexbox Froggy
flex container와 flex item을 제대로 이해했다면 아래 게임을 해 보자. 24레벨이 조금 어렵지만 할 수 있다!
