[10분 테코톡] 콜린의 Flex Layout

[10분 테코톡] 
Flex Layout - 콜린
https://www.youtube.com/watch?v=JQ0jO3B43YQ

- Layout
  Layout이란?(HTML, CSS)
     : 문서 위에 상자를 적절한 위치에 배치하는 방법을 의미
     : HTML에서 요소(상자)를 배치하는 방법
         - normal flow
              : 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 의미
              : 두 가지 배치 방법 존재
                  1. Block 형태
                       : 자신의 부모요소 너비를 전부 차지
                       : 새로운 블록을 추가할 시, 다음 라인 개행되어 추가하는 형태

                  2. inline 형태 
                       : 부모 너비의 전부를 차지하지 않고
                         자신의 컨텐츠 영역만큼만 너비를 차지
                       : 부모의 최대 너비를 넘지 않는 선에서 나란히 위치
                        if. 부모의 너비를 넘기면?
                            - 개행하여 배치
                if. 더 자세히 알고 싶으면?
                    - BFC : Block Formatting Context 
                    - IFC : Inline Formatting Context

     : Normal flow만 가지고 Layout을 구성한다면?
         - 다소 정보를 인식하기 어려운 형태로 보여짐
         - CSS의 적절한 스타일과 레이아웃을 조절하는 방법을 통해 
           사용자가 정보를 훨씬 습득하기 편리한 형태로 변경할 수 있음
 
     >> Display 속성 변경, 포지셔닝을 변경하는 등, 레이아웃 변경을 통해
          시각적 문서의 흐름을 바꾸는 방법은 여러가지 존재
            : 이번 발표에서 Flex를 이용한 레이아웃 변경에 대해 알아볼 것 

- Flex 용어
   > Flex란?
        : 문서 내 요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃
        : 지정 방법
           >> 부모의 요소에 Display:flex 로 지정
                ex ) 
                     .container{
                          display:flex;
                      }

    >> Flex 용어
        - Flex container
             : flex 아이템들의 배치나 정렬을 담당하는 역할
             : flex-direction, flex-wrap, justfy-content, align-item, align-content 속성값을 활용
                >> 행 또는 열방향 배치, 수평, 수직 정렬 가능
             : flex 아이템 == flex 컨테이너의 자식요소
                 >> 본인이 차지하는 크기 및 자신들 사이의 순서를 변경할 수 있음
                 >> flex에서 알고 있어야 할 두가지 축 존재
                       1. main axis
                            : flex item들의 주요 배치 방법과 정렬 등의 기준점이 되는 축
                            : 앞으로 사용할 flex와 관련된 대부분의 속성은 main axis(주축 기반)으로 동작
                            : 아이템 배치의 시작부인 main start를 기점으로 
                              main end방향으로 아이템 배치

                       2. cross axis
                            : 부차적인 정렬에 대한 기준을 담당
                            : cross start를 기점으로 cross end 방향으로 아이템 배치

                >> flex item을 담는 상자인 flex container,
                     flex container 내부에 위치한 flex item,
                     flex item들을 배치, 정렬하는데 핵심 기준이 되는 main 축
                     이를 보조하는 cross 축 
                     존재


- Flex 속성
   >> flex 컨테이너에 적용되는 속성
      1. flex-direction 속성
          : main-axis의 방향을 결정하여 main-start 기준점을 잡는 속성
          : 기본적으로 좌->우 & 상->하 
              => 문서 내 요소들이 배치되는 흐름은 writing-mode, direction 속성과 관련
                     >> 기본값 : horizonal-tb;
                                      ltr;
                     >> 반대값 : flex;
                                      rtl;
                     >> writing-mode : vertical-lr; 지정하면?
                             : flex-direction값이 row임에도 불구, 
                              보이기에는 column 방향으로 배치

          >> 4가지 값 존재
             1. flex-direction : row;
                  : main축이 row방향으로 설정 => 아이템들이 row 방향 기준으로 나열(왼->오)
             2. flex-direction : column;
                  : main axis를 column 방향으로 설정 => 아이템들이 column 방향으로 나열(위->아래)
             3. flex-direction : row-reverse;
                  : 이전과 달리 main 시작점이 반대방향에서 시작하는 구조(오->왼)
             4. flex-direction : column-reverse;
                  : 이전과 달리 main 시작점이 반대방향에서 시작하는 구조(아래->위)

      2. flex-wrap 속성
          : 컨테이너 영역을 overflow했을 때, item들을 어떻게 배치할 것인가?
          >> 기본값 flex-wrap : nowrap;
                       : overflow되도 한 개의 라인을 유지
          >> flex-wrap : wrap; 
                       : overflow되면 flex-item이 새로운 줄에 배치

      3. justify-content[정렬] 속성
          : main축 기준으로 flex-item들을 정렬
        >> 여러 속성 존재
            1. justify-content : center;
                 : main축을 기준으로 중앙 정렬
            2. justify-content : space-between;
                 : 각 item사이에 동일한 공간을 유지

      4. align-item[정렬] 속성
          : cross축 기준으로 flex-item들을 정렬
           1. align-item : stretch; (기본값)
                : item들이 부모의 높이를 전부 차지
           2. align-item : center;
                : cross축을 기준으로 중앙 정렬

   >> flex-item에 적용되는 속성    
      1. Order[순서] 속성
          : main축을 기준으로 flex-item의 시각적 순서를 변경하는 속성
          : 정수 값을 지니며 모든 item의 기본값 == 0
          : 0보다 작은 값을 부여 시, 시각적 순서상 앞에 위치
            0보다 큰 값을 부여 시, 시각적 순서상 뒤에 위치
      2. 크기 조절
          : flex-item의 크기를 조절하는 속성
            기본 크기 또는 늘리거나 줄일 비율을 설정
          >> 관련 속성 : flex-gorw, flex-shrink, flex-basis, flex 속성 존재
          1. flex-basis
              : flex-item의 기본 크기 설정
              : 기본값 = auto, 차지하고 있는 컨텐츠 크기만큼 설정
                width나 height에 부여하는 값처럼 px, %, rem 처럼 특정 값 부여 가능

          2. flex-grow
              : flex-item이 늘어날 비율을 결정하는 속성
              : flex-container의 빈 공간을 비율에 따라 분배하는 방식으로 결정
              : 기본값 = 0, 컨테이너에 빈 공간이 존재해도 영역을 채우지 않음,
               특정 숫자를 부여하면 적절하게 공간 채우는 것 가능
               >> 다음의 순서로 빈 영역 채움
                 1. 컨테이너 영역의 빈 영역의 크기를 구함
                      (container 영역 - 각 item의 flex-basis 크기의 합)
                 2. 아이템 들의 flex-grow 합을 구함
                 3. (빈 영역의 크기)(flex-grow 합)을 적절하게 분배함

          3. flex-shrikn
              : flex-item이 줄어드는 비율을 결정하는 속성
              : flex-item이 컨테이너 영역을 overflow했을 때, 적용
              : 0의 값을 주면 item의 크기가 부모의 크기를 넘어가더라도 줄어들지 않음
               숫자 값을 부여하면 이에 비례하여 item의 크기가 줄어듦
 
          4. flex
              : flex-grow, flex-shrink, flex-basis의 축약형 속성
               ex ) flex:11 auto, flex : 2 0 100px
                 flex : 1 == flex : 1 1 0 [1을 부여하면 flex 1 1 0을 의미]
                 flex :auto == flex:1 1 auto
                 flex :none == flex: 0 0 auto

      3. gap[여백]
          : flex-item 사이의 간격을 설정하는 속성 from grid(grid에서 파생된 속성)
              >> flex의 고유 속성이 아님 ==> grid에서 파생된 속성
   
>> flex 학습하면서 궁금했던 점
   1. flex-basis와 width 중 뭐가 더 우선순위가 높나요?
      화면상에 어떤 것을 표현하나요?

      flex-basis:auto => width -> flex-basis
      flex-basis:auto가 아닌 값 => flex-basis
      min(max)-width가 존재한다면 우선순위 제일 높음
   
   2. flex는 어떤 박스 형태를 따르나요?

      외부 환경(컨테이너) block 배치를 따르고
      내부 영역은 flex formatting context를 따름.
      
      display : inline-flex를 활용하면 외부 영역 inline context를
                  내부영역은 flex formatting context를 따름

   3. flex는 언제 사용하면 좋을까요?

      간단한 레이아웃에 좋음.
      복잡한 레이아웃은 grid를 사용하는 것이 적합
      flex의 배치, 정렬, 크기 변경, 순서 변경 등과 같은 특징을 활용하기 좋은 곳