한 장으로 정리하는 Flex Box

 

부모요소에 사용하는 속성들

flex

  flex는 부모 요소에 사용하면 자식 요소들을 정렬 시켜주는 속성

display: flex;

 

flex-direction

  정렬의 방향을 지정하는 flex-direction

flex-direction:row;  /* (기본값) 자손을 가로로 배치 */
flex-direction:column;  /* 자손을 세로로 배치 */
flex-direction:row-reverse;  /* 자손을 가로방향으로 순서를 뒤집어 배치 */
flex-direction:column-reverse;  /* 자손을 세로방향으로 순서를 뒤집어 배치 */

 

flex-wrap

  줄바꿈 여부를 지정하는 flex-wrap

flex-wrap : nowrap;  /* (기본값) 줄바꿈 하지않음 */
flex-wrap : wrap;  /* 줄바꿈 함 */ 
flex-wrap : wrap-reverse; /* 순서를 뒤집는다 */

 

justify-content

  가로축으로 정렬하는 justify-content

jutify-content: flex-start;  /* (기본값) */
jutify-content: flex-end;  /* 끝에서 부터 정렬 */
jutify-content: center;  /* 중앙 정렬 */
jutify-content: space-between; /* 양 끝에 배치하고 가운데 균등한 여백을 가짐*/
jutify-content: space-around; /* 양 끝에 배치된 자손에게도 균등한 여백을 가짐 */

 

align-items

  세로축으로 정렬하는 align-items

align-items: stretch;  /* (기본값) */
align-items: flex-start;  /* 위쪽에 */
align-items: flex-end;  /* 아래쪽에  */
align-items: center;  /* 가운데 */

 

align-content

  1줄 이상의 컨텐츠 그룹을 세로축으로 정렬하는 align-content

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

 

 

자손 요소에 지정하는 속성들

flex-grow

  여백(비어있는 공간)만큼 각각에게 얼마만큼의 비율로 늘어나게 해줄 것이냐를 지정. 
  공간의 사이즈를 맞추는 것이 여백을 나눠 갖는다는것에 주의
  nth-child 등을 이용하여 1 : 2 : 1 등으로 비율 조절 가능.

flex-grow: 1;

 

flex-basis

  보이는 공간을 비율로 지정하고 싶다면  flex-basis: 0을 지정해준다.

flex-basis: auto; /* 기본값 */
flex-basis: 0;

 

flex-grow / flex-shirink

  flex-grow는 넓어질때, flex-shirink는 줄어들때의 비율.

flex-shrink : 1;

  flex-grow와 flex-shirink는 축약형으로 flex 만 이용하여 사용할 수 있다. (이때, flex-basis의 기본값은 0으로 바뀐다)

flex: 1;

 

 

자손요소에 따로지정하는 속성들

align-self

  아이템을 개별로 정렬하는 align-self

align-self : flex-start;  /* nth  자손요소에 지정하여 개별로 위치를 정렬 가능 */
align-self : center;
align-self : flex-end;

 

order

  아이템의 순서를 제어하는 order

order : 3;   /* 각각의 nth 자손요소에 순서를 지정해주면 그 순서대로 정렬 */