css 1 (flexbox)

wrap 사용 전

body에는 3개의 div태그가 있고 위의 사진처럼 1 2 3 을 표시하고 있다.

각 태그마다 클래스는 item으로 지정했고 속성은 위의 사진과 같다.

3개의 태그를 총괄하는 div태그는 container로 id지정을 했다. 

flex 설정을 위해서는 적용을 원하는 태그 속성에 display:flex를 지정해주면 된다.

현재 flex-direction은 column으로 flex컨테이너 안의 item들의 방향을 정해준다. column이므로 열 방향 세로로 지정되었다!

 

wrap 사용 후

flex-wrap을 써서 잘린 부분을 위로 올려준다. 크기에 맞게 잘렸다

justify content

justify content는 정해진 방향을 기준으로 수평으로 item을 정렬한다. 현재 direction은 row니까 행(가로)로 나열되어 있다. space-between을 사용해서 일정 간격으로 정렬해줬다.

align-items

flex-direction으로 지정된 방향에 대해 수직으로 정렬해준다

align-content, align-items

align content는 여러줄을 정렬한다 

flex-grow

flex-grow는 자식요소로 아이템들에 지정해준다. 사진과 같이 각 요소들의 크기를 지정해줄 수 있다. 

flex-shrink

shrink는 grow와 반대로 축소된다 라고 생각하면 좋다.

flex-basis

flex-basis는 요소의 기본 크기를 지정해준다. 

flex와 grow,shrink,basis

flex는 grow shrink basis 이 셋 요소를 모두 지정할 수 있다.

위에서 one은 grow =0 , shrink =0, basis = 100px로 basis의 크기만 지정해준 상태이다.