flex 정리

 * 플렉서블 박스 = flex

        - 플렉서블박스 : display에 flex가 적용된 박스는 부모박스

        - 플렉스 아이템 :부모박스 하위 태그들은 자식박스

 * 플레서블 박스의 방향

        - 플렉스의 방향은 축에 따라 다르다.(주축, 교차축)

        - 주축이 가로일 경우 플렉스 아이템들은 왼쪽에서 오른쪽으로 배치

        - 주축이 세로일 경우 플렉스 아이템들은 위에서 아래로 배치

 * 플렉스 속성

    display : flex, inline-flex(모든 태그 적용)

            - flex : 박스를 블록 수준의 플렉서블 박스로 작동

            - inline-flex : 박스를 인라잉ㄴ 수준의 플렉서블박스로 작동

 * 아이템 배치 방향

            - flex-direction - row(기본), row-reverse, column, column-reverse

            - row : 박스를 왼쪽에서 오른쪽으로 배치

            - row-reverse : 박스를 가로로 배치하되 역방향으로 배치

            - column : 박스를 위에서 아래로 배치

            - column-reverse : 박스를 세로로 배치하되 역방향으로 배치

 * 아이템 배치 방식

    flex-wrap : nowrap(기본값), wrap, wrap-reverse(플렉서블 박스에 적용)

            - nowrap : 박스를 한줄로 배치

            - wrap : 박스를 여러줄로 배치

            - wrap-reverse : 박스를 여러줄로 배치하되 역방향 배치

                            - 주축이 가로일때(direction-row) : 아래에서 위로

                            - 주축이 세로일때(direction-column) : 오른쪽에서 왼쪽으로

 * 플렉스 아이템 배치와 방향 한번에

    => flex-flow : flex-flow : rowrwap;

    ex) flex-flow : row nowrap;