3가지 다른 미디어 쿼리에 대한 div 간격을 조정하는 데 도움이 필요합니다.

Question

코드가 포함된 코드펜 링크는 다음과 같습니다. https://codepen.io/gregelious/pen/zYmLGex

3개의 카테고리(div)가 3개의 별도 상자로 구성된 레스토랑 메뉴입니다.

(자세한 지침은 여기: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assements/location2/Assignment-2.md)

다음 지침을 따르세요.

• 너비가 992보다 큰 경우 각 상자는 화면 너비의 1/3을 차지해야 합니다
• 너비가 768에서 991 사이인 경우 처음 두 상자는 화면 너비의 50%를 차지하고 세 번째 상자는 다음 줄 너비의 100%를 차지해야 합니다
• 너비 < 768인 경우 각 상자는 너비의 100%를 차지하므로 3개의 별도 선이 있어야 합니다< 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

나는 "첫 번째", "두 번째", "세 번째"에 대한 div ID를 제공했으며 이것이 내 CSS입니다.

으아악

브라우저 창 크기를 조정해도 div의 크기가 변경되지 않는데 어떻게 수정해야 할지 모르겠습니다. Coursera 과정에서 이 과제를 받고 미디어 쿼리 및 기타 관련 내용에 대한 비디오를 다시 봤지만 진전이 없었습니다.

Answer 1

다음 데모에서 볼 수 있듯이 Flex 레이아웃을 제어하려면 컨테이너 div를 사용하는 것이 좋습니다.

레이아웃을 작동시켜야 하고, 그것이 바로 당신이 사용하는 것입니다 flex 属性所做的事情（更新，您需要将单位设置为 min-width 和 max-width 属性，例如 px : min-width: 768px)

또한 작은 화면에서 큰 화면까지 확장되는 레이아웃을 구축하고(모바일 우선) @media (min-width) CSS 쿼리만 설정하는 것이 좋습니다. 더 큰 미디어 쿼리가 설정된 경우에만 더 큰 미디어 쿼리가 이전의 더 작은 쿼리를 덮어쓰게 된다는 점을 고려하세요.

다음은 작동하는 데모입니다:

으아악 으아악