[CSS] flex-wrap, align-content, flex-grow, flex-shrink, flex-basis


[CSS] flex-wrap, align-content, flex-grow, flex-shrink, flex-basis

1. flex-wrap 먼저 flexbox를 다시 짚어본다. flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. section { display: flex; } 따라서 flexbox는 안에 요소의 크기가 얼마나 크든 모든 요소를 한 줄에 정렬하는 것을 목표로 한다. flexbox 만약 각각의 child container들이 기존의 크기를 유지하고 싶으면, 이를 해결하는 방법은 flex-wrap:wrap다. 우선 flex-wrap의 디폴트 값은 nowrap이다. wrap 하는 순간 child container들은 자신들의 원래 width를 유지할 수 있다. flex-wrap 2. align-content justify-content, align-items는 있지만 align-content는 무엇인가. 부모 컨테이너에 들어갔을 시 아래 사진과 같은 효과를 본다. align-...


#align_content #css #flex_basis #flex_grow #flex_shrink #flex_wrap

원문링크 : [CSS] flex-wrap, align-content, flex-grow, flex-shrink, flex-basis