Flexbox 항목이 행으로 설정되지 않습니다.

Question

Flexbox를 사용하여 포트폴리오를 구축 중입니다. 나는 모바일보기에서 그것을 먼저 썼다. 그리고 그것은 잘 움직이게되었다. 창 크기를 전체 크기로 조정하면 항목이 가로로 정렬 될 것으로 예상됩니다 (플렉스 흐름 : 행 줄 바꿈 설정)하지만 열에 머물러 있습니다.

이미지 자체의 크기를 조정하고 여백/패딩/기타 조정을 시도했지만 각 행마다 둘 이상의 항목이 표시되지 않습니다. 이상적으로 각 행은 3-4 개의 항목을 보유합니다. 여기

.projects { 
    display:flex; 
    flex-flow:row wrap; 
    justify-content:space-between; 
} 

.item { 
    border:1px solid white; 
    padding:5%; 
    margin:5% auto; 
} 

.item img { 
    max-width:100%; 
    height:auto; 
} 

.caption { 
    font-size:0.75rem; 
    border-top:1px solid white; 
    width:80%; 
    margin:0 auto; 
} 

전체 코드 : http://codepen.io/duggalsf/pen/bwjpLo

어떤 조언 도움이 될 것입니다. (미디어 쿼리를 할 필요가 있는지 알려주고, Flexbox 그리드를 사용하면 미디어 쿼리가 필요하지 않음을 이해했습니다.) 감사합니다!

Answer 1

.projects ul { 
    display:flex; 
    flex-flow:row wrap; 
    justify-content:space-around; 
} 

당신은 .projects UL 대신 .projects을 사용해야합니다. 작업하다. Fiddle

Answer 2

이 클래스를 변경하십시오 : -

.item { 
    border:1px solid white; 
    padding:5%; 
    margin:5% auto; 
    display:inline-block; /* add this class */ 
}