2 열에 틈이없이 왼쪽에서 오른쪽으로 HTML 요소

Question

2 열에 뉴스를 표시하는 페이지에서 작업하고 있습니다. 요소 너비는 동일합니다. 즉, 응답해야합니다. 뷰포트가 작 으면 1 열로 이동하지만 이미 수행 방법을 알고 있습니다. & 그것은 angular2 프로젝트입니다. html로 격차를 채우기 선을 유지하는 대신 때

|AAA|BBB| 
|AAA|BBB| 
|AAA|CCC| 
|DDD|CCC| 
|DDD|EEE| 
...... 

그래서 기본적으로 내가 뭔가가 필요 : 요소의 높이가 동일하지 않은 경우

문제

내가이 같은 뭔가가 필요, 여기에 온다. 나는 훌륭한 해결책이 될 수있는 Masonry를 이미 발견했지만 안타깝게도 Angular2와 함께 작업하고 이식 된 angular2-masonry 프로젝트가 죽었 기 때문에 안타깝게도 사용할 수 없습니다 ... 많은 문제가 있으며 해결할 수 없습니다. 그들 불행히도 .. 이전 jQuery 라이브러리를 기반으로 다른 옵션이 없습니다 .. angular2에 이식 된 버전없이 그들은 거의 사용할 수 있습니다. (작동해야하는 것을 알고 있다면 시도해 보겠습니다!) 다른 옵션은 입니다. 마법의 CSS입니다. 대안을 찾았지만 거의 모든 요소가 위에서 아래로 정렬됩니다. 이는 나에게 좋지 않습니다. 많은 연구 끝에 발견 한 유일한 사람은 https://codepen.io/anon/pen/veGmgJ이지만 불행히도 내 솔루션에서 어떻게 사용해야하는지 모르겠다. 내 솔루션은 기본적으로 큰 문제가 아닙니다. div (또는 무엇이든간에) ngFor ..

답변 해 주셔서 감사합니다!

Answer 1

플렉스 박스는 내가 쓴 것일 수도 있고 스태킹 열을 처리 할 수도 있습니다. Heres는 예 : https://codepen.io/anon/pen/aLmzVa

.flexContainer { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.flexItem { 
    flex: 1 0 250px; 
    border: 1px solid; 
}