flexbox

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 입니다. 1차원 레이아웃 모델인 이유는 한번에 하나의 차원 (행 또는 열) 만을 다룬다는 특징을 가지기 때문 입니다.

flexbox 구성

여러개의 자식 요소인 flex item과 이것을 감싸고 있는 상위 부모 요소인 flex container로 구성 됩니다.

• flex container : flex item을 감싸고 있는 부모 요소
• flex item : flex container 안에 있는 여러개의 자식 요소 , flex item 은 flex container 의 높이만큼 늘어나는 특징이 있습니다.
  

flexbox 만들기

정렬하려는 요소 (flex item)의 부모 요소 (flex container)의 선택자에 display:flex 속성을 지정 합니다.

.flex_contaier {
   display : flex; 
}

위와 같이 display:flex 속성을 지정하면 그 요소는 flex container가 되고 flex container의 자식 요소는 flex item 이 됩니다.

flexbox 주축

flex item 은 주축(main axis)에 따라 정렬 됩니다. 주축의 방향은 flex container의 flex-direction 속성 값에 따라서 달라집니다. flex-direction 속성의 기본값은 row (가로) 입니다.

• row : 주축의 방향이 왼쪽에서 오른쪽으로 가로 방향으로 flex item 이 정렬 됩니다.
• column : 주축의 방향이 위에서 아래쪽으로 세로 방향으로 flex item 이 정렬 됩니다.

flexbox 속성 분류

flexbox에서 정렬이나 배치에 사용하는 속성은 부모 요소인 flex container에 지정하는 속성과 자식 요소인 flex item 에 지정하는 속성으로 구분 됩니다.

flex container

전체적인 정렬이나 흐름에 관련된 속성은 flex container 로 속성을 지정 합니다.

• display

• flex-direction 👉 flex container 의 주축 방향을 설정하는 속성 입니다. 속성 값으로는

  • row : 좌에서 우로 수평 배치 됩니다. 가로로 배치 되며 속성의 기본값 입니다.
    

• row-reverse : 우에서 좌로 수평 배치 됩니다. row의 결과를 뒤집어 배치 됩니다.
  

• column : 위에서 아래로 수직 배치 됩니다. 세로로 배치 됩니다.
  

• column-reverse : 아래에서 위로 수직 배치 됩니다. column의 결과를 뒤집어 배치 됩니다.
  

• flex-wrap 👉 flex container 자식 요소인 여러개의 flex item 을 한 줄로 또는 여러줄로 배치합니다. flex-wrap 속성은 flex container 의 width보다 flex item들의 width의 합계가 더 큰 경우, 한줄로 표현할 것인지 또는 여러줄로 표현할 것인지를 지정합니다.

  속성 값으로는

  • nowrap : flex item을 개행하지않고 한줄에 배치. 기본값이며 각 flex item의 폭은 flex container에 들어갈 수 있는 크기로 자동 축소 됩니다.
    

    하지만 flex item 들의 width의 합계가 flex container의 width보다 큰 경우 flex container를 넘치게 되는데 overflow: auto;를 지정하면 가로 스크롤이 생기며 컨테이너는 넘치지 않게 된다.

  • wrap : flex item 들의 width의 합이 flex container의 width보다 큰 경우 개행이 되어 flex item이 배치되는데 배치 방법은 좌에서 우로 위에서 아래로 배치된다.
    

  • wrap-reverse : wrap과 모두 동일하고 배치 방법만 아래에서 위로 배치 된다.
    

• flex-flow 👉 flex-direction, flex-wrap을 한번에 설정할수 있는 단축속성이며 기본값은 row, nowrap 으로 지정되어 있습니다.

• justify-content(주축 배치 방법) 👉 flex container의 주축을 기준으로 flex item을 수평으로 정렬할때 배치 방법을 결정 합니다. 예를 들어 flex-direction 이 row 일때 속성 값을 기준으로

  • flex-start : 왼쪽으로 배치 됩니다. 기본값 입니다.
    

  • flex-end : 오른쪽으로 배치 됩니다. flex-start 에서 그대로 오른쪽으로 밀어서 배치된다고 생각하면 됩니다.
    

• center : flex container 의 중앙에 정렬합니다.
  

• space-between : 좌우 끝에 flex item 이 정렬되고 나머지 flex item 들은 동일한 간격으로 정렬이됩니다.
  

• space-around : 모든 flex item 들이 동일한 여백을 가지도록 배치 합니다.
  

• space-evenly : 모든 flex item 들의 간격을 동일하게 배치 합니다.
  

  주축의 방향이 바뀌면 주축을 기준으로 justify-content 속성이 적용 됩니다.

• align-content (교차축 배치 방법 flex-wrap 이 wrap 일때) 👉 교차축을 기준으로 flex item 을 수직 정렬합니다. 이 속성은 flex-wrap 의 값이 wrap 으로 지정되어 있고 flex item 을 배치하기 위해 필요한 공간보다 flex container 의 크기가 더 클때 동작 합니다. 예를 들어 flex-direction 이 row 일때 속성 값으로는

  • stretch : 첫번째 flex item의 행 배치 이후에 균등하게 정렬되어 배치된다. 기본값이다.
  • flex-start : 교차축 가장 위로 배치 됩니다.
  • flex-end : 교차축 가장 아래로 배치 됩니다.
  • center : 교차축 중앙으로 배치 됩니다.
  • space-between : flex item 이 flex container의 위아래 끝에 배치되고 나머지 flex item 들은 균등하게 배치된다.
  • space-around : 모든 flex item이 균등하게 배치된다.

• align-items (교차축 배치 방법 flex-wrap 이 nowrap 일때) 👉 flex item 을 flex container 에서 수직으로 배치 됩니다. flex container 가 자신이 가지고 있는 flex item 들을 어떻게 배치 시킬지 결정하는 속성 입니다. align-items 속성은 모든 flex item에 적용됩니다. 쉽게 말해서 정렬 위치를 결정 할 수 있습니다.

• flex-start : 교차축 가장 위로 배치 됩니다.
  

  • flex-end : 교차축 가장 아래로 배치 됩니다.
    

• center : 교차축 중앙으로 배치 됩니다.

  

flex item

각각의 flex item 의 크기나 순서, 위치에 대한 속성은 flex item 에 정의합니다.

• flex 👉 flex-grow, flex-shrink, flex-basis 속성의 단축속성 입니다. 기본값은 0 1 auto 입니다.
• flex-grow 👉 flex item 이 기본 크기보다 더 커질 수 있는지를 결정하고 flex container 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있습니다. 기본값은 0이고 음수값은 무효합니다. flex-grow 를 지정한 item 이 flex container의 모든 여백을 차지 합니다. 모든 flex item이 동일한 flex-grow 속성값을 가지면 모든 flex item은 동일한 너비를 갖습니다. 속성값이 클수록 화면의 너비가 커지면 커질수록 더 넓은 너비를 가지게 됩니다. flex container 가 좁아서 모든 flex item 들이 작아지는 상황에서는 flex-grow 는 작동하지 않는다.
• flex-shrink 👉 flex item 이 기본 크기보다 더 작아질 수 있는지를 결정하고 flex container 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있습니다. 기본값은 1이고 음수값은 무효합니다. 0을 지정하면 축소가 해제되어 원래의 너비를 유지합니다. flex container 가 줄어드는 상황에서 flex-shrink 속성을 지정하지 않으면 어느정도 줄어들다가 멈추지만 flex-shrink를 지정한다면 지정 값이 클수록 flex item은 더 많이 줄어든다.
• flex-basis 👉 각각의 flex item 크기를 지정하는 속성 입니다. box-sizing 속성이 지정되어 있지 않은 경우 콘텐츠 박스의 크기를 결정하게 됩니다. px, % 단위로 지정하고 기본값은 auto 이다. 지정하지 않으면 전체 flex item 의 크기를 지정한 값으로 flex item 이 생성되어 있습니다.
• order 👉 flex item의 배치 순서를 지정합니다.1,2,3,4,5 처럼 숫자로 flex item 의 위치를 지정 할 수 있습니다. 작은 숫자 일수록 주축의 배치 방법에 따라서 그 배치 방법의 가장 앞에 배치 됩니다. html 코드를 변경하지 않고 order 속성값을 지정하는 것으로 간단히 재배치할수 있습니다. 기본 배치 순서는 flex container에 추가된 순서이고 기본값은 0 입니다.
  예 )
  위와 같이 각각의 item 들에 order 을 설정 해 줍니다.
  그럼 배치 순서는 어떻게 될까요?
  배치 순서는 item6, item5, item3, item2, item1, item4 순서로 배치 될 것 입니다. 확인 해 봅시다.
  
  예상대로 item 들이 배치되는것을 확인 할 수 있습니다.

• align-self : 각각의 flex item 이 교차축에서 어떤 방법으로 정렬될 것인지를 직접 결정 합니다.

   * flex-start : 교차축의 시작점에 배치 
   * flex-end : 교차축의 끝점에 배치
   * center : 교차축의 중심부에 배치

  예) 주축은 row 일때 1 번 item 을 교차축 중앙으로 배치 합니다.