Flexbox 란?

• Flexbox는 모던 웹을 구현하기 위해 기존 layout보다 더 세련된 방식의 니즈에 나온 CSS3의 새로운 layout 방식, 정렬에 강점이 있음
• 사용방법
  • 스타일에 display: flex 추가
  • 부모요소가 inline 요소인 경우 flex 대신 inline-flex 추가
• 장점
  1. 한줄의 코드로 수평정렬이 가능
• flexbox 구성
  • main axis(주축)에 맞춰 flex-item들이 정렬되고, cross axis를 수직 축이라고 한다.
    

    

• flex container 속성
  • flex-direction : 주축의 방향을 설정
    1. row : 좌에서 우로 수평 배치
    2. row-reverse : 우에서 좌로 수평 배치(row 반대)
    3. column : 위에서 아래로 수직 배치
    4. column-reverse : 아래에서 위로 수직 배치(column 반대)
  • flex-wrap : flex-item들이 flex container의 크기를 넘어갈 경우**(width 기준)** 개행할건지를 정하는 속성이다.
    • nowrap : 개행하지 않고 1열에 모두 배치한다. 기본값이고 각 flex-item의 크기는 1열에 다 들어갈 수 있는 크기로 최대한 줄어든다.
    • wrap : flex-item들의 width가 flex container의 width를 넘는 경우 개행한다. 기본적으로 위에서 아래, 좌에서 우로 개행한다.
    • wrap-reverse : 아래에서 위, 우에서 좌로 개행한다.
  • flex-flow : flex-direction 과 flex-wrap을 동시에 설정가능. 기본값은 row nowrap
    

    

  • justify-content : 주축 방향으로 아이템들의 정렬 방법을 결정
  • align-items : 주축의 수직방향으로 아이템들의 정렬 방법을 결정. flex item들에 모두 영향을 줌
  • align-content : 주축의 수직방향으로 아이템들을 정렬함
  align-items와 align-content의 차이 (참조)
• flex item 속성
  • order : item의 정렬 순서를 정한다. 기본배치는 container에 추가된 순서이고 기본값은 0이다.
  • flex-grow : 너비에 대한 확대인자를 가진다. 기본값은 0이다.
    

    

  • 다른 요소를 1, 해당 요소를 3 주면 너비를 3배 더 차지하게 된다.
  • flex-shrink : 너비에 대한 축소인자를 가진다. 기본값은 1이며, 0일 시 축소가 풀린다.
  • flex-basis : 너비 기본값을 px, % 등의 단위로 지정한다. 기본값은 auto.
  • flex : flex-grow, flex-shrink, flex-basis 속성을 다 지정할 수 있다. 기본값은 0 1 auto.
    

    

  • align-self : flex container의 align-items 속성보다 우선하여 개별 item을 정렬한다. 기본값은 auto