3 つの異なるメディア クエリの div の間隔を調整するのに助けが必要です

Question

コードを含む codpen リンクは次のとおりです。 https://codepen.io/gregelious/pen/zYmlGex

これは、3 つのカテゴリ (div) が 3 つの個別のボックスとして含まれるレストランのメニューです。

(詳細な手順はこちら: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)

手順は次のとおりです:

• 幅 >= 992 の場合、各ボックスは画面幅の 3 分の 1 を占める必要があります
• 幅が 768 ～ 991 の場合、最初の 2 つのボックスは画面幅の 50% を占め、3 番目のボックスは次の線幅の 100% を占める必要があります。
幅が 768 未満の場合、各ボックスは幅の 100% を占めるため、3 つの別々の行が必要です
• < 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

「first」、「next」、「thirth」の div ID を指定しました。これが私の CSS です:

リーリー

ブラウザ ウィンドウのサイズを変更しても、div のサイズは変更されず、修正方法がわかりません。 Coursera コースからこの課題を受け取り、メディア クエリやその他の関連内容に関するビデオをもう一度見ましたが、進歩はありませんでした。

Answer 1

次のデモに示すように、コンテナ div を使用して Flex レイアウトを制御することをお勧めします。

レイアウトを機能させる必要があります。これは、

flex プロパティを使用して行うことです (更新、単位を min-width と max に設定する必要があります) - width 属性 (例: px : min-width: 768px)

また、小さな画面から大きな画面までレイアウトを構築し (モバイルファースト)、

@media (min-width) CSS クエリのみを設定することをお勧めします。より大きなメディア クエリが設定されている場合にのみ、より大きなメディア クエリが前の小さなクエリを上書きすることを考慮してください。

これは動作するデモです:

リーリー リーリー