flex박스...화면정렬 정리

     flex박스로  화면정렬 진행...

 

            flex-direction : row : 기본값 왼쪽에서 오른쪽

            flex-direction: row-reverse: 오른쪽에서 왼쪽

            flex-direction: columㅜ-reverse: 아래에서 위쪽 반대순이다.

 

            flex-wrap : nowrap ;그냥 한줄에 다 붙여라....wrap으로 하면 자동 줄빠꿈해라...

            wrap-reverse하면 반대로 밑에서...아래로..

 

            flex-flow는 direction와 wrap 를 합친것이다. column nowrap로 하면 세로정렬로 연결계속된다.

            justify - countent : flex-strat 왼쪽에서 시작....end는 순서는 유지 오른족에서 시작

            justify-content: space-around; 중앙정렬을 하는데 아이템에 감싸는 빈공간이 있다.

                   evenly 는 똑같은 간격이 생겨나고 between은 화면에 맞게 배치하고 간격조정

         

 

            align - items : center;는 수직축으로 중앙 정렬

            align-content: 자동으로 아이템을 줄 배치하게된다..

              space -between : 화면 맨위, 맨아래는 붙어 있으면서 중간아이템을 기준으로 공간이 생겨 정렬된다.

              center;센터에 모여서 정렬된다.

              모질라에 확인볼수 있다.

            - 아이템에따란 속성값을 다르게 줄수 도 있다.

            plex-grow :화면크기 변경에 따라 컨테이너를 채울려고 자동으로 커지거나 작아지거나 한다...

            plex-shrink: 화면크기가 작아져서 자동으로 작아지는데 순서에 따라 다르게 지정가능하다.

            plex-basis: auto; 화면에 따라 자동으로 변화하게 하는데 width에따라 100,,80,,60,,,%로지정가능

            align-self: center;....아이템 한개만 위치를 변경할수 있다.

 

            flexboxfroggy연습게임...