[CSS] CSS Flex 속성 정리

일반적으로 웹페이지의 레이아웃은 css의 display, float, position 등과 같은 속성을 사용해 구현한다. 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 굉장히 복잡해진다.

이러한 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것이 css3에 추가된 flexbox이다. flexbox를 사용할 경우 요소의 크기와 순서를 유연하게 배치할 수 있다. 

 

# flex (flexbox)

flexbox는 viewport나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산시킬 수 있다.

이러한 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다.

 

 

.flex_container {
  display: flex;
}

 

display: flex 속성이 적용된 요소는 flex container가 되고, flex contatiner의 자식 요소는 자동적으로 flex item이 된다.

이러한 flex item는 주축(main axis)에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction 속성으로 결정하는데, 기본적으로는 row 속성으로 지정이 되어 있다.

 

# 부모 요소와 자식 요소 속성 구분

flexbox의 전체적인 정렬과 흐름 속성은 부모인 flex container에 정의하고, 크기나 순서에 관련된 속성은 자식 요소에 해당하는 flex-item에 정의한다. 

 

이것을 분리해서 적용하는 것이 가장 중요하다!

• flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
• flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order

이러한 flexbox는 internet explorer 10 이상이 지원한다. 지원을 하지 않는 브라우저도 있는데, 대체적으로 모바일 브라우저는 flexbox를 지원한다.

(자세한 것은 밑에..)

 

 

# 지정 속성 (필수!)

• flex-direction: 내부 요소들의 정렬 방향

.flex_container {
  display: flex;
  flex-direction: row;             /* 가로방향 정렬 (default) 
                                    default를 사용할 경우, 생략이 가능하다. */
                  column;          /* 세로방향 정렬 */
                  row-reverse;     /* 가로방향의 반대에서부터 정렬 */
                  column-reverse;  /* 세로방향의 반대에서부터 정렬 */
}

 

 

# 부모 요소 4가지

• flex-wrap : 줄 바꿈 설정, 자식 요소들의 수가 많아져서 개수가 꽉 찼을 때 자동 줄바꿈을 해준다.

 .flex_container {
  display: flex;
  flex-wrap: nowrap        /* 한줄 정렬, default */
             wrap          /* 여러줄 걸쳐 정렬 */
             wrap-reverse  /* 반대 방향으로 여러줄 걸쳐 정렬 */

 

• justify-content: 가로선 상 정렬

 .flex_container {
  display: flex;
  justify-content: flex-start    /* 왼쪽 정렬 */
                   flex-end      /* 오른쪽 정렬 */
                   center        /* 가운데 정렬 */
                   space-between /* 화면에 딱맞게 정렬 */
                   space-around  /* 양끝 공간을 일정하게 띄어 정렬 */
                   space-evenly  /* 양끝과 가운데 공간이 모두 일정하게 띄어 정렬 */

 

• align-items: 세로선 상 정렬

 .flex_container {
  display: flex;
  align-items: flex-start  /* 위로 정렬 */
               flex-end    /* 아래로 정렬 */
               center      /* 가운데 정렬 */
               baseline    /* 밑면 기준으로 정렬 */
               stretch     /* 정확한 높이값을 주면 변하지 않으나
                              최소높이를 주면 container 영역까지 정렬 */

 

• align-content: (세로선상 정렬에서 여분의 공간이 있다면) 컨테이너 사이 간격조절

 .flex_container {
  display: flex;
  align-content: flex-start    /* 위로 정렬 */
                 flex-end      /* 아래로 정렬 */
                 center        /* 가운데 정렬 */
                 space-between /* 화면에 일정하게 정렬 */
                 space-around  /* 라인사이에 동일한 간격으로 띄어 정렬 */
                 strech        /* 줄이 늘어나 나머지 공간을 차지, default */

 

 

# 자식요소 5가지

• flex: flex-grow, flex-shrink, flex-basis의 축약형 속성

        원래 내가 가진 본연의 크기를 0으로 초기화 시킨다. 그래서 전체가 1의 비율 균등한 비율로 나눠가질 수 있다!

 .flex_item {
  display: flex;
  flex: 1;          /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
        1 1 auto;   /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
        1 500px;    /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

 

• flex-grow: (0보다 큰 값이 들어가면) 유연한 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메워준다.

 .flex_item {
  display: flex;
  flex-grow: 1;  
  /* flex-grow: 0; , default */
}

 

• flex-shrink: (0 보다 큰 값이 들어가면) 유연한 박스로 변하고 flex-basis보다 줄어든다.

 .flex_item {
  display: flex;
  flex-shrink: 1;  
  /* flex-grow: 0; , default */
}

 

• flex-basis: Flex 아이템의 기본 크기 설정

        flex-basis 값이 적용되어 있다면 width, height 값은 무시된다.

 .flex_item {
  display: flex;
  flex-basis: auto; /* default, 해당 아이템의 width 값을 사용한다. */
	      0; 
	      50%;
              300px; 
	      10rem; 
	      content; 
}

 

• order: 배치 순서

 .flex_item {
  display: flex;
  order: 1; 
        /* -1(왼쪽), 0(default), 1(오른쪽) */
}

 

 

# 끝마치며..

정말 외워야 할게 많아서 헷갈리고 복잡하니 한번 정리해 보았다...

한번 쭉 정리해 보니 이해가 되는 것 같다.

다음은 어떤 걸 정리해 볼까!