CSS FIex

Flex 속성은

컨테이너에 적용해야하는 속성과,

컨테이너 안의 아이템에 적용해야하는 속성으로 나뉘어 진다.

---

<컨테이너에 적용해야 하는 속성들>

display: flex // 컨테이너는 블록 형태로 있지만, 그 안의 아이템들이 inline 처럼 배치된다.

See the Pen rNVLezQ by volt-nuna (@ddonni0426) on CodePen.

flex-direction 정렬 방향 //row가 디폴트 

row, colum (reverse도 가능)

flex-wrap:(nowrap, wrap, wrap-reverse)  //브라우저가 컨텐츠 크기보다 줄었을 때 어떻게 할 건지를 결정

align-content: // 2줄 이상일 때,아이템을 어떻게 정렬할 것인지 (wrap 설정이 된 상태에서 사용)

=> 축약형 flex-flow: direction wrap;

justify-content:(flex-start, flex-end ,space-between, center, space-around, space-evenly)//메인축을 기준으로 어떻게 정렬할 것인지

align-items: stretch,start,end, baseline,center//메인축의 수직방향으로 정렬 

(메인축이란, 아이템들이 나열된 방향을 말함.)

이 두가지를 이용하면 가운데 정렬이 정말 쉬워진다.

See the Pen OJVReWj by volt-nuna (@ddonni0426) on CodePen.

---

<아이템에 적용해야 하는 속성들>

flex-basis: 숫자  //아이템의 최소 크기를 설정한다. (기본값은 auto지만 생략할 경우 basis 값은 0이된다. auto 는 width값을 basis값으로 ㄱㅏ진다.)

만약 basis를 100px로 설정을 했을 때, 원래 크기가 100이 안되던 것들은 100으로 늘어나고, 100이 넘던 요소들은 변화가 없다.) width를 100px로 주면 100을 넘던 애들은 컨텐츠 크기상관없이 강제로 100px로 맞춰진다. 

flex-grow:숫자 //아이템 크기가 flex-basis값보다 커질 수 있는지 결정하고(값이 0보다 크면 true), 커질 수 있다면 컨테이너 안의 여백을 각 아이템들이 얼마의 비율로 나누어 가질 것인지를 설정한다. 주의할 점은 여기서 말하는 비율은 아이템의 크기 비율이 아니라, 아이템들이 갖게되는 여백의 비율이다. 기본값은 0이다.

flex-shirink: 숫자// grow와 반대되는 개념으로, 아이템들이 얼마의 비율로 작아질 것인지를 결정한다. 기본값이 1이다. 즉 반응형에서 창의 크기가 작아질 때 아이템들의 크기를 어떤 비율로 줄어들게 할 것인지... 기본값은 1이다.

=> 축약형 flex: grow shrink basis;

align-self: 수직축 정렬인데, align-item과 달리 얘는 개인플레이다. 아이템 하나만 콕찝어서 수직정렬 할 수 있다.

order: 배치 순서를 결정하는데, 숫자가 작을 수록 먼저 나온다. HTML 태그의 상의 순서엔 변화가 없지만, 화면상의 배치를 커스텀하게 만든다.

z-index: position 때랑 똑같다. z축의 순서를 결정한다. 숫자가 클 수록 위로 올라온다. 

 

---

http://www.flexboxdefense.com/

flex연습할 수 있는 대포게임ㅎ

Flexbox Defense