flex 레이아웃 이해하기

display : flex 로 만든 레이아웃 이해하기

 

 

 

// display : flex;

// flex-wrap: flex;

두 속성을 정렬이 필요한 요소들의 부모 요소에 준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

요소들이 여러 행에 나열되도록 하려면 flex-wrap 속성의 값을 wrap으로 지정한다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치된다. . flex-wrap속성이 wrap으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 nowrap을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 flex 항목들은 컨테이너의 폭에 맞게 줄어듭니다. nowrap을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.