바닐라 자바스크립트로 연극 정보 제공하는 사이트를 구현하는 토이프로젝트를 진행하다가 다양한 문제를 겪었는데요. 그 중 하나가 연극 포스터 이미지 배치에 대한 것이었습니다. 제가 원하던 이미지 배치는 아래와 같았습니다. 이미지들을 감싸는 컨테이너가 flex box니까 그냥 flex-wrap: wrap; 과 justify-content: space-evenly; 를 주면 되겠거니 생각했지만 곧 아래와 같은 문제가 생겼습니다. CSS는 이렇습니다. flex box가 ul이라고 보시면 됩니다. 다른 요소들에 대한 스타일은 제외했습니다. .container ul{ display: flex; flex-wrap: wrap; justify-content: space-evenly; } .container ul > li{..