플렉스 박스(Flex Box)

플렉스 박스란?

플렉스 박스가 나오기 이전

웹 사이트의 레이아웃 만드는 방법

• Position 속성
• Float 속성
• Table 태그

위와 같은 방법의 단점

• 복잡하고 시간이 오래 걸림
• 박스 안 아이템들의 수직 정렬 등에 제약이 있음

float의 기본 목적

• 이미지와 텍스트를 어떤 방식으로 배치할 것인지를 정하는 css 속성
• ‘배치’와는 전혀 상관없는 속성으로 박스 배치를 해오고 있었음

플렉스 박스

• 가변적인 박스로 만드는 기술
• 박스 요소들을 다양하고 자유롭게 배치할 수 있음
• 반응형 웹사이트를 제작하기에 최적의 기술

플렉스 박스의 축

축	설명
주축	기본적으로 수평 방향(왼쪽에서 오른쪽으로 배치) 아이템이 정렬하는 방향의 축
교차축	기본적으로 수직 방향(위에서 아래로 배치)

플렉스 컨테이너

플렉스 컨테이너(= 부모 박스)

• 가변적인 박스로 작동하기 위한 기본 개념
• 플렉스 컨테이너에 플렉스 박스의 특정 속성값을 적용하면 가변적인 박스로 작동하게 됨
• 플렉스 아이템의 크기, 배치 방향 및 순서, 정렬 방법 등을 제어할 수 있음

display 속성

• 플렉스 아이템을 감싸는 요소로 플렉스 컨테이너를 쓰려고 할 때 사용하는 속성

  속성 값	설명
  flex	컨테이너 안의 플렉스 아이템을 블록 레벨 요소로 배치
  inilne-flex	컨테이너 안의 플렉스 아이템을 인라인 레벨 요소로 배치

flex-direction 속성

• 플렉스 컨테이너 안에서 플렉스 아이템을 배치하는 주축과 방향을 지정하는 속성

  속성 값	설명
  row(기본값)	주축을 가로로 지정 왼쪽에서 오른쪽으로 배치
  row-reverse	주축을 가로로 지정 오른쪽에서 왼쪽으로 배치
  column	주축을 세로로 지정 위쪽에서 아래쪽으로 배치
  column-reverse	주축을 세로로 지정 아래쪽에서 위쪽으로 배치

  • flex-direction: row;

    

  • flex-direction: row-reverse;

    

  • flex-direction: column;

    

  • flex-direction: column-reverse;

    

flex-wrap 속성

• 플렉스 아이템을 여러 줄에 걸쳐 표시하는 속성

  속성 값	설명
  nowrap(기본값)	플렉스 아이템을 한 줄에 표시
  wrap	플렉스 아이템을 여러 줄에 표시
  wrap-reverse	플렉스 아이템을 여러 줄에 표시하되 시작점과 끝점이 바뀜

  • flex-wrap: nowrap;

    

  • flex-wrap: wrap;

    

  • flex-wrap: wrap-reverse;

    

flex-flow 속성

• flex-direction 속성과 flex-wrap 속성을 한번에 지정하는 속성
• 기본값은 row wrap
• 작성 방법

flex-flow: row nowrap;
flex-flow: column wrap;

justify-content 속성

• 주축에서 플렉스 아이템 간 간격을 지정하는 속성

  속성 값	설명
  flex-start(기본값)	아이템들을 시작점에 맞춰 배치
  flex-end	아이템들을 끝점에 맞춰 배치
  center	아이템들을 중앙에 배치
  space-between	첫 번째 아이템과 끝 아이템을 시작점과 끝점에 배치한 후, 나머지 아이템들은 그 사이 같은 간격으로 배치
  space-around	모든 아이템을 같은 간격으로 배치
  space-evenly	아이템들의 사이와 양 끝에 균일한 간격을 생성

  • justify-content: flex-start;

    

  • justify-content: flex-end;

    

  • justify-content: center;

    

  • justify-content:space-between;

    

  • justify-content:space-around;

    

  • justify-content:space-evenly; (margin: 0;)

    

align-items 속성

• 교차축에서 플렉스 아이템 간 간격을 지정하는 속성

• 아이템이 한 줄이라도 적용

• 라인을 기준으로 아이템들을 정리

  속성 값	설명
  flex-start	아이템들을 교차축의 시작점에 배치
  flext-end	아이템들을 교차축의 끝점에 배치
  center	아이템들을 교차축의 중앙에 배치
  baseline	교차축의 시작점에 배치되는 아이템들의 글자 베이스라인에 맞춰 다른 아이템들을 배치 큰 글자의 바닥선을 기준으로 아이템 배치
  stretch(기본값)	아이템들을 확장해서 간격 없이 배치

  • align-items: flex-start;

    

  • align-items: flex-end;

    

  • align-items: center;

    

  • align-items: baseline; (item1, item4: font-size: 30px)

    

  • align-items: stretch;

    

align-content 속성

• 교차축에서 플렉스 아이템 간 간격을 지정하는 속성

• 아이템이 여러 줄일 때만 적용되는 속성

• 라인으로 아이템들을 정리

  속성 값	설명
  flex-start	아이템들을 시작점에 맞춰 배치
  flex-end	아이템들을 끝점에 맞춰 배치
  center	아이템들을 중앙에 배치
  space-between	첫 번째 아이템과 끝 아이템을 시작점과 끝점에 배치한 후, 나머지 아이템들은 그 사이 같은 간격으로 배치
  space-around	모든 아이템을 같은 간격으로 배치
  stretch(기본값)	플렉스 아이템을 늘려서 간격 없이 배치

  • align-content: flex-start;

    

  • align-content: flex-end;

    

  • align-content: center;

    

  • align-content: space-between;

    

  • align-content: space-around;

    

  • align-content: stretch;

    

플렉스 아이템

플렉스 아이템(= 자식 박스)

• 플렉스 컨테이너의 자식 박스
• 플렉스 박스 레이아웃을 적용할 대상

align-self 속성

• 플렉스 아이템을 각각 원하는 형태로 배치할 수 있는 속성

  속성 값	설명
  flex-start	아이템들을 교차축의 시작점에 배치
  flext-end	아이템들을 교차축의 끝점에 배치
  center	아이템들을 교차축의 중앙에 배치
  baseline	교차축의 시작점에 배치되는 아이템들의 글자 베이스라인에 맞춰 다른 아이템들을 배치
  stretch(기본값)	아이템들을 확장해서 간격 없이 배치

  .item1 {
      background: red;
      align-self: flex-start;
  }
  .item2 {
      background: orange;
      align-self: flex-end;
  }
  .item3 {
      background: yellow;
      align-self: center;
  }
  .item4 {
      background: green;
      align-self: baseline;
  }
  .item5 {
      background: blue;
      align-self: stretch;
  }

  

flex 속성

• 플렉스 아이템의 크기 조절 및 가변적인 박스로 작동하게 하는 속성

  속성 명	속성 값
  flex	[flex-grow][flex-shrink] [flex-basis] 0 1 auto(기본값)

속성 값	설명
flex-grow	플렉스 컨테이너 내부 공간에서 플렉스 아이템의 너비 증가 비율을 설정 기본값 0 (음수 불가) width, flex-basis 속성 값에 따라 늘어나는 크기가 변할 수 있음
flex-shrink	플렉스 컨테이너 내부 공간에서 플렉스 아이템의 너비 감소 비율을 설정 기본값 1 (음수 불가) width, flex-basis 속성 값에 따라 줄어드는 크기가 변할 수 있음
flex-basis	플렉스 아이템의 기본 크기를 설정하기 위한 속성 기본값 auto width 속성에서 사용할 수 있는 모든 값을 사용 가능 (크기 단위 모두 가능)

• flex-grow: 다른 아이템에 비해 몇 배로 더 늘어날래?
• .item1 { flex-grow: 1; }

• .item2 { flex-grow: 1; }

• .item3 { flex-grow: 1; }

• flex-shrink: 다른 아이템에 비해 몇 배로 더 줄어들래?
• .item1 { flex-shrink: 2; }

• .item2 { flex-shrink: 2; }

• .item2 { flex-shrink: 3; }

• .item1 { flex-basis: auto; }
  • auto는 아이템이 가지고 있던 width를 그 값 그대로 보여줌

• .item1 { flex-basis: 50px; }

• flex-basis: auto;인 경우
  • 아이템의 width와 height가 우선 적용
• flex-basis: auto;가 아닌 경우
  • flex-basis가 우선 적용

flex: flex-grow flex-shrink flex-basis

• .item2 { flex: 1; }
  • flex 속성에 값이 한 개인 경우
    • flex-grow가 적용

• .item2 { flex: 1 200px; }
  • flex 속성에 값이 두 개인 경우 - 1
    • 두 번째 값이 단위를 가지고 있으면 flex-basis값

• .item2 { flex: 1 2; }
  • flex 속성에 값이 두 개인 경우 - 2
    • 두 번째 값이 단위가 없으면 flex-shrink값

• .item2 { flex: 1 2 200px; }
  - flex 속성에 값이 세 개인 경우
  1. flex-grow
  2. flex-shrink
  3. flex-basis
  - 기본값은 200px, 늘어날 땐 부모값을 꽉 채우고 줄어들 땐 다른 아이템에 비해 2배 더 많이 줄어든다

  ![](https://velog.velcdn.com/images/pisces/post/18e8eefc-6eb4-4313-8cca-7deddfeb2037/image.png)

  
  새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅