👩🏻‍💻 flex

• css 레이아웃을 위한 display 속성.
• 아이템을 행 또는 열로 자유자재로 배치할 수 있음.
• 중심축을 잘 생각해야함

📍 큰 덩어리를 우선 배치하자!

• flex 에서는 우선 중심축과 반대축의 개념을 잡는게 중요!
• display: flex; 로 꼭 flex 임을 선언 후에 속성들 사용!
• 부모 태그에 display: flex; 를 주면 자식 태그들이 가로 정렬됨.

📍 큰 영역을 나누는 속성 정리

• flex-direction : 요소의 나열 방향

  • row(기본값) : Lt -> Rt 정렬

  • row-reverse : Rt -> Lt 정렬

  • column : top -> bottom 정렬

  • column-reverse : boottom -> top 정렬

    
    

• flex-wrap : 요소들의 정렬

  • nowrap(기본값) : 브라우저 크기 관계 없이 한줄 정렬
  • wrap : 요소들을 여러줄에 걸쳐 정렬 (≒ 자동정렬)
  • wrap-reverse : wrap 의 반대로 정렬
    
    

• flex-flow

  • flex-direction + flex-wrap
  • 같이 많이 사용하는 속성 두개를 묶어서 사용, 그냥 요소들만 쓰면

.box{
  display : flex;
  flex-flow : row wrap;
  }

• justify-content

  • flex-start(기본값) : 아이템을 시작점으로 정렬시킴

    • flex-direction : row; -> Lt 정렬
    • flex-direction : column; -> top 정렬

  • flex-end: 아이템을 끝점으로 정렬

    • flex-direction : row; -> Rt 정렬
    • flex-direction : column; -> bottom 정렬

  • center : 가운데 정렬

  • space-between :아이템들 사이에 균일한 간격.
    but 브라우저와 닫는 부분은 간격없음.

  • space-around :아이템들 둘레에 균일한 간격 → but 브라우저와 닫는 부분은 간격 좁음.

  • space-evenly : 아이템 사이와 양끝의 균일한 간격.

    
    

• align-items : 요소가 1줄 일때, 반대축 방향으로 정렬

  • stretch(기본값): 아이템들이 수직축 방향으로 쭉 늘어암.
  • flex-start : 아이템들이 시작점으로 정렬
  • flex-end : 아이템들이 끝점으로 정렬
  • center : 가운데 정렬
  • baseline: 아이템들을 텍스트 베이스라인 기준으로 정렬
    
    

• align-content :

  • flex-wrap: wrap; 일때, 아이템들의 행이 2줄 이상일때 , 수직방향 정렬을 결정하는 속성.
  • just ify-content 의 요소를 모두 사용할 수 있음.
  
  
  

📍 하나의 item(컨텐츠)에 들어가는 속성 정리

• order : 각 아이템들의 시각적 나열 순서를 결정 (순번을 메겨 배열)
  
  

• flex-glow (기본값 '0')

  • 아이템이 flex-basis 의 값보다 커질 수 있는지를 결정하는 속성.
  • 숫자값이 들어가는데, 0보다 큰 값이 세팅되면, 유연한 아이템박스로 변해, 브라우저 크기 관계없이 화면을 메움.

• flex-shrink (기본값 '0'): 컨테이너가 작아졌을때 어떻게 하느냐를 지정, 유연하게 작아짐.

• flex-basis (기본값 'auto'): 아이템들이 공간을 얼마나 더 차지해야하는지 조금 더 세부적으로 명시할 수 있음.
  
  

• align-self: 아이템 별로 정렬 가능.

📌생각정리

flex는 레이아웃 나누기에 대부분 속성들이 유용하나,
나는 개인적으로 딱 가운데 정렬되는게 좋아서
justify-content: center; align-items: center;
속성들이 좋다!!