웹페이지의 컨테이너에 아이템의 폭과 높이 또는 순서를 변경해서 웹페이지의 사용 가능한 공간을 최대한 채우고 이를 디바이스 종류에 따라 유연하게 반영하도록 하는 개념 flexbox는 레이아웃의 방향성이 일방적 이므로 웹페이지 전체를 디자인 하지는 못한다. 이걸 보완하기 위해 Grid 레이아웃이 개발 되었고, 1차원의 CSS flexbox에 비해 CSS Grid 는 2차원의 디자인을 만들 수 있다. Flexbox 와 Grid 차이
속성
속성값
display
flex: 요소들을 일렬로 배치 inline-flex: 요소들의 크기에 맞춰 컨테이너의 크기가 정해짐
flex-direction
row: default / 요소들의 방향을 수평으로 column: 요소들의 방향을 수직으로
flex-wrap
wrap: flex는 element들의 width 픽셀크기를 상관하지 않고 무조건 일렬로 표시 하지만, wrap 속성을 주게 되면, 엘리먼트의 width 값을 줄 수 있다. 그러나 그만큼 화면에는 일렬로 표시되지 못하고 다음줄로 떨어지게 된다.
display: flex; 는 flex-direction:row flex-wrap: no-warp; 을 모두 함축하고 있다.
따라서 flex-flow: row nowrap; 이라고 표현 하기도 한다. -> CSS 숏컷(shortcut) 이라고 함 (축약구문)
.
flex-grow
row 속성에 값을 넣는다. 컨테이너 폭에 꽉 차게 맞추어 비율만큼 요소들의 크기를 정해주는것 Default : 0 flex-grow 는 컨테이너와 아이템들의 여백에서 flex-grow 시키는 비율을 정해서 각 요소들에 폭을 추가해준다. 결국, flex-grow를 쓰면 컨테이너 폭에 꽉 차게 맞춰주긴 하는데, 각 아이템의 비율을 원래의 남는 부분에서 지정된 비율만큼을 계산해서 보태준다.
