➥ 플렉스박스에서는; 단지 플렉스 컨테이너의 자식요소들에 flex: 1; 값을 주는 것만으로 플렉스 컨테이너 내부 자식요소들을 한 라인상에 위치하는, 또한 사용가능한 모든 공간이 균등하게 분배되는 플렉스 항목들로 분할된다. 단, 플렉스박스는 레이아웃을 행 또는 열로 제어하도록 설계되었지만 동시에 둘 다 제어할 수는 없고, 각 플렉스 라인은 해당 행 및 열 라인에 대해서만 공간을 분배할 수 있다. 따라서, 다음 행으로 내려가는 플렉스 항목이 있는 레이아웃을 만들고자 한다면; 플렉스 컨테이너에서 flex-wrap: wrap;으로 설정해주어야 한다:

높이가 같은 항목의 단일 행: flexbox
단지 플렉스 아이템들에서 flex: 1;로 설정해주는 것만으로 내부 자식요소들을 한 라인상에 위치하는, 또한 사용가능한 모든 공간이 균등하게 분배되는 플렉스 항목들로 분할된다!
☞ 다만, margin이나 gap 속성을 사용하여 항목간 간격을 만들 수는 있지만, 플렉스 열 사이에 구분선을 그어주는 플렉스박스의 Css 속성은 아직 없다! 
    
        .Multicol-container3-1 { display: flex; }
        .Multicol-container3-1 > div { flex: 1; margin: 0 20px; }
아래 행으로 내려가는 flex 항목 레이아웃
플렉스박스는 레이아웃을 행 또는 열로 제어하도록 설계되었지만 동시에 둘 다 제어할 수는 없고, 각 플렉스 라인은 해당 행 및 열 라인에 대해서만 공간을 분배할 수 있다
☞ 다음 행으로 내려가는 플렉스 항목이 있는 레이아웃을 만들고자 한다면; 플렉스 컨테이너에서 flex-wrap: wrap;으로 설정해주어야 한다! 
    
        .Multicol-container3-2 { display: flex; flex-wrap: wrap; }
        .Multicol-container3-2 > div { flex: 1 1 200px; margin: 0 20px; }

☞ 두 경우의 차이를 보려면; 화면 너비를 좁히면서 위쪽과 비교해보십시오..