[Html css Flex] style flex 내용 압축 정리

#1. 부모에 적용하는 기능

1. 자식 노드를 정렬하는 방법 입니다.

{
      display: flex;  /* 가장 기본 of 기본 */
      /* row는 1줄에 전부, column은 1개가 1줄 차지 */
      flex-direction: row;
      flex-direction: column;
      flex-direction: row-reverse;
      flex-direction: column-reverse;
}

 

2. 자식 노드 크기가 부모보다 클 경우 어떻게 표현할지 정하는 기능 입니다.

{
       /* wrap은 넘어가면 다음 행으로, nowarp은 넘어가든 말든, reverse가 붙으면 역으로 표현 */
       flex-wrap: nowrap; 
       flex-wrap: wrap; 
       flex-wrap: wrap-reverse; 
}

 

3. 위 1번과 2번을(direction과 wrap) 같이 쓰는 방법 

{
       flex-flow : row wrap; 
}

 

4. 자식노드 내용물 가로 정렬하는 방법 입니다.

{
       /*start는 좌측, end는 우측, center는 가운데, space 계열은 가운데 중심으로 간격 */
       /* -> 부모의 height 값이 자식의 내용물 크기(content)와 같다면 아무런 효과가 없습니다. */
       justify-content: flex-start; 
       justify-content: flex-end; 
       justify-content: center; 
       justify-content: space-between; 
       justify-content: space-around; 
       justify-content: space-evenly; 
}

 

5. 자식노드 내용물을 세로로 정렬하는 방법 입니다.

{
       /* stretch는 기본, start는 위, end는 아래, center는 중앙, baseline은 텍스트 베이스라인 기준 */
       /*  -> 부모의 height 값이 자식의 내용물 크기(content)와 같다면 아무런 효과가 없습니다. */
       align-items: stretch; 
       align-items: flex-start; 
       align-items: flex-end; 
       align-items: center; 
       align-items: baseline; 
}

 

6. flex-warp의 속성이 warp인 경우 세로 정렬하는 방법 입니다.

{
       /* stretch는 기본, start는 위, end는 아래, center는 중앙, baseline은 텍스트 베이스라인 기준 */
       /* -> warp 효과가 발생하여 n개의 자식 노드가 아래로 간 경우에 동작 합니다.  */
       align-content: stretch; 
       align-content: flex-start; 
       align-content: flex-end; 
       align-content: center; 
       align-content: space-between; 
       align-content: space-around; 
       align-content: space-evenly; 
}

 

---

 

#2. 자식에게 적용하는 기능

1. 부모의 direction 값이 row인 경우 엘리먼트의 넓이, column인 경우 엘리먼트의 높이 값을 정합니다.

{
       flex-basis: auto;  /* 자동 */
       flex-basis: 0;     /* 0 */
       flex-basis: 20%;   /* %, px, rem, content 등 사용 가능 */
}

 

2. 부모의 direction 값이 row인 경우 넓이, column인 경우 높이, 0보다 큰 값을 넣어주면 자동으로 간격을 맞추어 줍니다.

{
       flex-grow: 1; 
       flex-grow: 0; 
}

{
       /* 여러개의 엘리먼트에 각각 비율로 줄 수 있습니다. 예) 1:4:1 비율 */
       .children:nth-child(1) { flex-grow: 1; }
       .children:nth-child(2) { flex-grow: 4; }
       .children:nth-child(3) { flex-grow: 1; }  
}

 

3. flex-basis 의 값 보다 커질수 있는지 작아질 수 있는지에 대한 기능 입니다.

{
       /* 기본값은 1이며, 동작을 위해서는 1보다 작게. */
       flex-shrink: 0; 
}

 

4. 위 1~3번(grow, shrink, basis) 을 통합한 기능 입니다.

{
       flex: 1;   /* 의미 -> grow : 1, shrink : 1, base : 0% */
}

 

5. 부모에서 사용한 align-items을 자식노드에게 준 버전 입니다.

{
       /* stretch는 기본, start는 위, end는 아래, center는 중앙, baseline은 텍스트 베이스라인 기준 */ 
       align-self: auto;
       align-self: stretch; 
       align-self: flex-start; 
       align-self: flex-end; 
       align-self: center; 
       align-self: baseline; 
}

 

6. flex 순서를 정하는 기능 입니다.(zIndex 처럼)

{
        /* 순서입니다. 작은 숫자부터 먼저 표기 합니다.  */
        /* 예 : 3번째, 1번째, 2번째 순으로 표기 됩니다. */
        .children:nth-child(1) { order: 2; }
        .children:nth-child(2) { order: 3; }
        .children:nth-child(3) { order: 1; }   
}