코드가 포함된 코드펜 링크는 다음과 같습니다. https://codepen.io/gregelious/pen/zYmLGex
3개의 카테고리(div)가 3개의 별도 상자로 구성된 레스토랑 메뉴입니다.
(자세한 지침은 여기: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assements/location2/Assignment-2.md)
다음 지침을 따르세요.
나는 "첫 번째", "두 번째", "세 번째"에 대한 div ID를 제공했으며 이것이 내 CSS입니다.
으아악브라우저 창 크기를 조정해도 div의 크기가 변경되지 않는데 어떻게 수정해야 할지 모르겠습니다. Coursera 과정에서 이 과제를 받고 미디어 쿼리 및 기타 관련 내용에 대한 비디오를 다시 봤지만 진전이 없었습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
다음 데모에서 볼 수 있듯이 Flex 레이아웃을 제어하려면 컨테이너 div를 사용하는 것이 좋습니다.
레이아웃을 작동시켜야 하고, 그것이 바로 당신이 사용하는 것입니다
flex属性所做的事情（更新，您需要将单位设置为min-width和max-width属性，例如px:min-width: 768px)또한 작은 화면에서 큰 화면까지 확장되는 레이아웃을 구축하고(모바일 우선)
@media (min-width)CSS 쿼리만 설정하는 것이 좋습니다. 더 큰 미디어 쿼리가 설정된 경우에만 더 큰 미디어 쿼리가 이전의 더 작은 쿼리를 덮어쓰게 된다는 점을 고려하세요.다음은 작동하는 데모입니다: