CSS

• 배경
  • 과거엔 Table 태그로 레이아웃을 잡았지만, 여러 모로 좋은 방법이 아니었음.
  • position은 지금도 많이 쓰이고 있고, 나쁘지 않은 방법임.
  • float은 배우기 어려움.
  • 이러한 상황에서 flex가 등장함.
• flex
  • flex를 사용할 땐, 반드시 부모, 자식과 같은 두 단계의 태그가 필요함.

  <container>
  	<item></item>
      <item></item>
  </container>

  • container에 부여해야 하는 속성과 item에 부여해야 하는 속성이 따로 있다.
  • container에 부여해야 하는 속성
    • display
    • flex-direction
    • flex-wrap
    • felx-flow
    • justify-content
    • align-items
    • align-content
  • item에 부여해야 하는 속성
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self
  • flex 사용법
    • flex를 사용한다고 했을 때, 그 출발점은 부모 요소에 display : flex를 선언하는 것부터 시작이다.
    • basis, grow, shrink
      • flex-basis : 크기를 지정
      • flex-grow : 부모 컨테이너의 flex-grow 속성의 값으로 1을 주면, 부모 컨테이너의 크기를 자식들이 균등하게 나눠가짐.
        • 만약 특정 자식 요소의 flex-grow를 부모 컨테이너에서 설정한 것보다 높게 설정하면, 해당 자식 요소만 크기가 달라짐.
      • flex-shrink : 윈도우 창을 줄이는 것에 따라 요소의 크기가 줄어들지 말지를 결정하고, 얼마나 줄어들지도 결정할 수 있음.
• 출처
  • 생활코딩 FLEX 수업