See the Pen align-self by nilgi (@nilgi) on CodePen. display: flex; • align-self: center; // 지정한 아이템 세로 위치 중앙에 • align-self: flex-start; // 지정한 아이템 세로 위치 위에서 시작 • align-self: flex-end; // 지정한 아이템 세로 위 아래에서 시작

See the Pen flex item by nilgi (@nilgi) on CodePen. ▸order: 순서 / 아이템의 순서를 재설정. ▸flex-grow / 아이템 크기를 비율로 지정. ▸flex-shrink / 아이템을 컨테이너 크기에 맞게 축소하지 않는다. ▸flex-basis / 지정값을 무시하고 다시 지정. ▸flex: 0 0 200px / 속기. flex-grow + shrink + basis

See the Pen flex center by nilgi (@nilgi) on CodePen. display: flex; justify-content: center; // 가로 중앙 align-items: center; // 세로 중앙 flex로 하니까 어렵네.

See the Pen align-content by nilgi (@nilgi) on CodePen. display: flex; flex-wrap: wrap; • align-content: space-between; // 세로 기준 양끝에 나열 • align-content: space-around; // 아이템 세로 공간 똑같이 • align-content: stretch; // 컨테이너 크기만큼 늘려서 • align-content: center; // 중앙에 • align-content: flex-start; // 위에서부터 시작 • align-content: flex-end; // 아래부터 시작

See the Pen align-items by nilgi (@nilgi) on CodePen. display: flex; • align-items: flex-start; // 아이템의 세로 정렬 위치 위 • align-items: center; // 중앙 • align-items: flex-end; // 아래 • align-items: stretch; // 아이템을 컨테이너 높이만큼 늘리기 • align-items: baseline; // 아이템 중앙을 기준으로 나열

See the Pen flex-flow by nilgi (@nilgi) on CodePen. flex-flow = flex-direction + flex-wrap flex-flow: row-reverse wrap;

See the Pen justify-content by nilgi (@nilgi) on CodePen. • justify-content: flex-start; // 기본값. 왼쪽 • justify-content: center; // 가운데 • justify-content: flex-end; // 오른쪽 • justify-content: space-around; // 항목공간 똑같이. 첫항목 왼쪽과 끝항목 오른쪽에 공백 들어감. 항목 기준. • justify-content: space-between; // 항목사이 공간 똑같이. 첫항목 왼쪽, 끝항목 오른쪽에 공백 없음. 컨테이너 기준.

See the Pen flex-wrap by nilgi (@nilgi) on CodePen. display: flex; • flex-wrap: nowrap; / 기본값. • flex-wrap: wrap; / 아이템을 래핑하여 크기를 유지하고 창 사이즈에 따라 위에서부터 차례로 정렬 • flex-wrap: wrap-reverse; / wrap의 반대 방향으로 정렬 반응형 웹페이지를 만들 때 유용.

See the Pen flex-direction by nilgi (@nilgi) on CodePen. flex-container안 item들의 방향을 설정한다. • flex-direction: column; // 위부터 1번 시작 • flex-direction: column-reverse; // 아래부터 1번 시작 • flex-direction: row; // 왼쪽부터 1번 시작 • flex-direction: row-reverse; //오른쪽부터 1번 시작

See the Pen Flexbox 정의 by nilgi (@nilgi) on CodePen. Flexbox는 아이템의 위치 지정(예:float) 없이 반응형 웹페이지를 만드는데 아주 유용하다. Flexbox의 기본은 Flex comtainer안에 아이템을 넣어 display: flex 한다. 티스토리 오디세이 스킨에 Flexbox가 사용되고 있다. 다른 스킨은 안 봐서 모르겠음. html의 구조를 보면 div안에 div 4개가 있다. div의 기본 성질은 block 구조로 쌓는 성질인데 flex를 사용하면 inline구조를 가지게 된다. flex는 방향 값이 있으므로 변경 가능하다.