728x90
flex layout
flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다.
display: flex;
display: -webkit- flex;
display: -ms-flexbox;위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻.
flex-grow
자식 요소가 적거나 그 크기가 작아 공간이 암을 때 항목의 크기를 늘려 채워주는 방법을 정의.
| 속성 값 | 속성 설명 |
| 0 | (기본 값) |
| 1 | 항목들이 모두 1이면 같은 크기 |
| 양수 | 값을 높게 줄수록 더 늘어남 공간이 부족할 때는 어떤 값도 무의미 |
flex-shrink
| 속성 값 | 속성 설명 |
| 0 | 공간이 부족해도 항목의 크기를 줄일 수 없음 |
| 1 | (기본값)-자식 요소들이 많아서 컨테이너를 넘치면 안 넘치게 알아서 좁아짐 |
| 양수 | 값을 높게 줄수록 더 좁아짐.(내부적으로 수축지수가 자동 계산됨) 공간이 남을 대는 어떤값도 무의미 |
flex-basis
| 속성 값 | 속성 설명 |
| auto | (기본 값) |
| 50px, 100px,... | 원하는 가로 크기를 부여함 |
flex-direction
| 속성 값 | 속성 설명 |
| column | 위에서 아래로 나열 |
| column-reverse | 아래에서 위로 나열 |
| row(기본 값) | 좌측에서 우측으로 나열 |
| row-reverse | 우측에서 좌측으로 나열 |
flex-wrap
| 속성 값 | 속성 설명 |
| wrap | 자식 요소들이 많으면 다음 줄로 넘침 |
| nowrap(기본) | 자식 요소들이 많아도 한줄 안에 배치됨 |
| wrap-reverse | 자식 ㅇ소들이 많으면 다음 위 줄로 넘침 |