[CSS] Flexbox

 

Container
배치 / 정렬

 

display: flex;                    // flex 컨테이너 적용

ㅇ 배치
- 방향
flex-direction: row;              // (default) 내부 item 가로방향으로 배열
flex-direction: row-reverse;      // 내부 item 가로방향 역순으로 배열
flex-direction: column;           // 내부 item 세로방향으로 배열
flex-direction: column-reverse;   // 내부 item 세로방향 역순으로 배열
- 방법
flex-warp: nowarp;                // (default) 내부 item의 크기를 container 크기에 맞춰 조절
flex-wrap: wrap;                  // 내부 item 크기 고정, 개수가 늘어남에따라 container 크기를 초과하는 경우 다음 행부터 출력
flex-wrap: wrap-reverse;          // 내부 item 크기 고정, 개수가 늘어남에따라 container 크기를 초과하는 경우 이전 행부터 출력
- 방향 + 방법
flex-flow: {direction} {warp};    // flex-direction 속성과 flex-wrap 속성 동시 설정

ㅇ 가로 정렬
justify-content: center;          // item을 container 행 가운데 정렬
justify-content: flex-start;      // item울 container 행 좌측 정렬
justify-content: flex-end;        // item울 container 행 우측 정렬
justify-content: space-around;    // container item들의 행 전/사이/후 공간 띄움
justify-content: space-between;   // container item들의 행 사이 공간 띄움

ㅇ 세로 정렬
align-items: center;              // item을 container 열 가운데 정렬
align-items: flex-start;          // item을 container 열 위쪽 정렬
align-items: flex-end;            // item을 container 열 아래쪽 정렬
align-items: stretch;             // item을 container 높이에 맞춤
align-items: baseline;            // container 내부 item들의 높이기준 가운데 정렬

ㅇ flex 라인 정렬
align-content: center;            // flex 행들을 container 열 가운데 정렬
align-content: flex-start;        // flex 행들을 container 열 위쪽 정렬
align-content: flex-end;          // flex 행들을 container 열 아래 정렬
align-content: space-around;      // flex 행 전/사이/후 공간 띄움
align-content: space-between;     // flex 행 사이 공간 띄움
align-content: stretch;           // flex 행 사이 공간을 item의 높이를 늘려 매꿈

 

---

 

Items

 

ㅇ 우선순위

order: 1;                       // flex행 내부의 노출순서 지정

ㅇ 크기 (비율)
flex-grow: 1;                   // flex행 내부에서 item의 크기 늘이기 비율 지정
flex-shrink: 1;                 // flex행 내부에서 item의 크기 줄이기 비율 지정
flex-basis: 100px;              // flex행 내부에서 item의 기본크기 지정
flex: {grow} {shrink} {basis}   // flex행 내부에서의 item 크기 늘이기/줄이기 비율 및 기본크기 지정

ㅇ 개별 item 세로 정렬
align-self: center;             // flex행 내부에서 해당 item만 vertical 위치를 가운데 정렬
align-self: flex-start;         // flex행 내부에서 해당 item만 vertical 위치를 시작 위치로 정렬
align-self: flex-end;           // flex행 내부에서 해당 item만 vertical 위치를 끝 위치로 정렬

 

---

 

Responsive

 

.flex-container {
  display: flex;
  flex-direction: row;            // item을 가로 방향으로 노출
}

/* 웹크기가 800px보다 작은 경우 정의된 css 적용 */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;       // item을 세로 방향으로 노출
  }
}