flexbox

flexbox
    - 선언 방법 
         - display : flex(inline-flex);
                inline-flex : inline-block와 비슷하게 움직임
                flex : block와 비슷하게 움직임

           - 정렬을 원하는 요소의 부모 요소에게 부여

     - 가로/세로 정렬
           - flex-direction : row/column/row-reverse/column-reverse
                  -flex 사용시 보이지 않는 두 개의 축이 생김
                  -flex-direction의 값에 따라 축의 형태가 달라짐
  
                 - row(0인 부분에서 축이 시작됨)     
                         
                             0
                              l
                              l     
                              l
              0------------l---------------->main axis      
                               l    
                               l
                              cross axis


                - column

                              0
                              l
                              l     
                              l
              0------------l---------------->cross axis      
                               l    
                               l
                              main axis
 
                -row-reverse (많이 쓰이지는 않음)
                              0
                              l
                              l     
                              l
        main axis<----- l----------------0    
                              l    
                              l
                           cross axis     

             -column-reverse
                            main axis
                              l
                              l     
                              l
              0------------l---------------->cross axis      
                               l    
                               l
                               0           

 
        flex-wrap : nowrap / wrap
              - nowrap : 자식의 사이즈를 줄여서라도 요소를 한 줄로 정렬시킴
              - wrap : 한 줄에 정렬시키기에는 공간이 부족할 때 여러 줄로 만들어 버림


         justify-content : main axis를 기준으로 요소를 정렬하고 싶을 때
                      - flex-start : main-axis의 시작점부터 정렬됨
                      - flex-end : main-axis의 끝점부터 정렬됨
                      - center : main-axis의 가운데에 정렬
                      - space-between : 요소 사이의 간격을 같게 정렬
                      - space-around : 요소의 좌우가 같은 간격이 되게 정렬

         align-items : cross axis를 기준으로 요소 정렬 시
                       - center : cross axis의 가운데에 정렬
                       - flex-start : cross axis의 위에 정렬
                       - flex-end : cross axis의 아래에 정렬
                 cf>allign-contents 
                             - flex-wrap이 wrap일 때 사용
                             - flex-wrap이 wrap이여서 요소가 각각 다른 줄에 있을 때,
                               같은 main axis에 속한 요소끼리 축이 만들어짐
                             - 이러한 축을 없애고, 요소를 한꺼번에 움직이기 위해서는
                               align-contents를 사용함
 
          order
               - 마크업 순서와 상관없이 순서 바꿀 수 있음
               - css 속성에 order : 1, order : 2, order : 3, .... 적용