SK networks AI Camp - CSS_flex

flex

  ○ flex, inline-flex

 

      ● 유연한 박스레이아웃 사용을 위해 기존 사용했던 display 속성에 새로 추가된 flex | inline-flex를 지정해야 함

/*e.g.*/
div { display : flex ; }

 

  ○ flex-direction

 

        ● 요소 박스의 배치 방향 지정하는 속성

        ● 요소 박스가 반드시 display 속성 값으로 flex | inline-flex로 지정되어야 함

        ● row, column, roweverse, column-reverse 등 속성값을 지정하여 flex 박스에 포함됨 자식 요소 박스를 표시

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
}

 

  ○ flex-wrap

 

      ● flex로 지정된 요소에 포함된 자식 요소 박스가 한 줄 or 여러 줄로 배치될 것인지를 지정하는 속성
      ● 초기값 none : 모든 자식 요소를 하나의 단일 행이나 열에 표시
      ● flex-wrap 속성 값이 wrap일 경우 : 모든 자식 요소는 여러 줄로 배치
      ● wrap-reverse : 역방향으로 여러 줄을 배치

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
 flex-wrap : wrap ;
}

 

  ○ order

 

      ● 요소 박스의 배치 순서를 지정하기 위한 속성
      ● 속성 값에 지정된 숫자 중 가장 낮은 번호의 요소가 가장 먼저 배치
      ● 요소 박스의 order 값이 동일하게 지정된 경우 : 일반적인 흐름에 따라 먼저 배치된 요소가 우선

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
 flex-wrap : wrap ;
}
.box1 { order : 1 ; }
.box4 { order : -1 ; }

 

  ○ flex-grow

 

      ● flex로 정의된 부모 요소가 자식 요소보다 크거나 작을 경우 자식 요소의 크기를 조정하는 방법

      ● 자식 요소에 확대 비율을 지정하여 부모 요소의 크기에 맞게 자동으로 크기를 조정
      ● 속성 값에는 음수 값을 사용 불가

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
}
.box1 { flex-grow : 1 ; }
.box2 { flex-grow : 2 ; }
.box3 { flex-grow : 1 ; }

 

  ○ justify-content

 

      ● flex로 지정된 부모 요소 내에서 자식 요소의 정렬 방식을 지정하기 위한 속성

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
 justify-content : space-between ;
}

 

  ○ align-content

 

      ● flex로 지정된 부모 요소 내에서 여러 개의 행이나 열로 구성된 요소 박스의 정렬을 지정하기 위한 속성

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
 align-content : center ;
}

 

  ○ algn-items, align-self

 

      ● 라인 박스의 높이에 따라 배치되는 요소 박스에 배치에 영향을 주는 교차축(cross axis)을 지정하는 속성
      ●  flex-direction 속성 값: row 또는 column에 따라 요소 박스가 배치, 요소 박스의 너비나 높이가 기준 축으로 정해짐
      ●  전체 요소의 기준축을 동일하게 지정할 경우 :  align-items 속성을 flex가 정의된 부모 요소에 지정

          자식 요소마다 기준 축을 지정해야 할 경우 : align-self 속성으로 지정

  - align-items

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
 align-items : center ;
}

  - align-self

/* e.g. */
div {
 display : flex ;
 flex-direction : row ;
}
.box1 { align-self : flex-start ; }
.box2 { align-self : flex-end ; }
.box3 { align-self : center ; }
.box4 { align-self : baseline ; }
.box5 { align-self : stretch ; }

 

플렉스 연습 링크 : https://flexboxfroggy.com/#ko

Flexbox Froggy