부모(container)가 display:flex일 때, 부모에게 설정하면 그 자식(item, 즉 box)의 정렬에 영향을 미치는 속성.
flex-direction
flex-direction: row;는 main axis와 시작-끝 방향이 동일함. 기본값이기 때문에 굳이 명시하지 않아도 된다.flex-direction: row-reverse;는 main axis와 시작-끝 방향이 역순임(기본값).flex-direction: column;은 cross axis와 시작-끝 방향이 동일함.flex-direction: column-reverse;는 cross axis와 시작-끝 방향이 역순임.부모의 width나 height가 부족해도개행하지 않고 어떻게든 한 줄 안에 넣는다.
flex-wrap
flex-wrap: nowrap;도 flex-direction: row처럼 기본값이다.flex-wrap: wrap;은 부모의 공간이 부족하면 box 단위로 개행함.flex-wrap: wrap-reverse;는 거꾸로(밑에서 위로) 개행함.상하 180도 뒤집은 것이기 때문에,여백 위치도 거꾸로가 된다.
flex-flow
flex-direction과 flex-wrap을 함께 사용할 때, flex-flow로 대체하면 코드가 짧아진다.
flex-direction: column-reverse;와 flex-wrap: nowrap;을 합치면 flex-flow: column-reverse nowrap;이 된다.
justify-content
justify-content: flex-start;도 기본값.justify-content: flex-end;는 flex-direction: row-reverse;와 비슷해 보이지만 box를 역순으로 배치하지 않는 게 차이점이다.justify-content: space-between;은 첫 box와 마지막 box를 부모의 border끝에 붙이고 box들 사이 공간을 균등하게 나눈다.justify-content: center;는 box들을 가운데에 배치한다.justify-content: space-around;는 justify-content: space-between;과 비슷하지만 다르다. 각 box의 앞뒤에 동일한 너비의 공간을 준다.
align-items
이 속성은 cross axis 방향의 box 위치와 여백 설정에 관여하며, 개행하지 않는다.
align-items: flex-start;는 cross axis 방향 기준 시작점에 box들을 배치한다.align-items: flex-end;는 cross axis 방향 기준 끝점에 box들을 배치한다.align-items: center;는 cross axis 방향 기준 가운데에 box들을 배치한다.align-items: baseline;은 조금 특이한데, 우선 cross axis 방향 기준 시작점에 box들을 배치한 후box 내 컨텐츠를 기준으로 밑줄을 그었을 때 main axis 방향으로 일렬이 되도록 작은 box들의 배치를 조정한다(빨간 선 참고).align-items: center;와 비슷해보이지만 상단에 남는 공간이 없으며, box 내부 콘텐츠 크기에 따라 파란 선으로 표시한 높이의 비가 달라진다.align-items: stretch;는 box의 높이를 부모의 높이만큼 cross axis 방향으로 늘려준다.
align-content
마찬가지로 cross axis 방향의 box 위치와 여백 설정에 관여해 align-items와 유사한 성질을 가진다. 부모의 width가 부족하면 flex-wrap처럼 개행하며, box 덩어리들을 inline 단위로 나눠서 움직인다는 점에서 align-items와 다르다.
align-content: flex-start;는 cross axis 방향 기준 시작점에 box들을 배치한다.align-content: flex-end;는 cross axis 방향 기준 끝점에 box들을 배치하되, 순서와 형태를 유지한다(여백이나 순서가 reverse 되지 않음).align-content: center;는 cross axis 방향 기준 가운데에 box들을 배치한다.align-content: space-between;는 cross axis 방향 기준 시작점부터 끝점까지 box들을 배치하되 box들 사이에 동일한 공간을 준다.align-content: space-around;는 box들 앞뒤로 동일한 수치의 여백을 줘, 시작점의 box들과 끝점의 box들이 border에 붙지 않는다.align-content: stretch;는 box들 전체의 높이를 부모의 높이만큼 cross axis 방향으로 늘려주되, 다른 line의 공간은 침범하지 않는다.
(추가) stretch가 적용이 안 될 때
align-items 또는 align-content의 stretch가 적용이 안 되는 이유는box에 height가 지정되어 있기 때문이다.stretch는 height를 늘려주는 속성이기 때문에height를 auto로 설정하면 된다(width는 아무런 상관이 없음).
