不同數量的 div 基於屏幕的最佳實踐有多大？

Question

我遇到了關於 flex 盒內元素的問題。 我正在使用flex: 1 1 auto和flex-flow: column wrap 。 我想顯示一些大小隨着屏幕大小而增加的 div。

使用媒體查詢會很混亂，而且代碼會很大。 我正在尋找一種不使用媒體查詢的方法來實現它，因為 flex 中每個 div 的大小約為 200px，我需要進行大量從低分辨率到高分辨率遞增的媒體查詢。

Answer 1

min-width 屬性在這里非常有用。 我放了 15 個 div 來顯示對多種屏幕尺寸的影響。

 .flex-parent { display: flex; flex-wrap: wrap; /* this makes the divs wrap */ } .flex-child { margin: 3px; background-color: lightblue; min-width: 200px; /*prevents the flex-child from shrinking more than 200px */ height: 50px; flex: auto; /* this auto-adjusts the width */ /* Everything after this is just to align everything to the center */ padding-top: 20px; text-align: center; }

 <div class='flex-parent'> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> </div>

Answer 2

使用flex-flow: row wrap 。

如果您想在屏幕變寬時顯示更多div元素，您需要將row用於flex-direction ，而不是column 。 使用flex-direction: row ，彈性項目將從左到右放入每一行，就像一行文本。 屏幕越大，適合的項目就越多。

如果您希望您的 flex 項目增長並填充所有可用空間，請使用flex: auto 。 這可能意味着項目最終具有不同的尺寸，因為您可以在每個彈性行中擁有不同數量的項目。 如果您希望所有這些都具有相同的大小，您可以設置類似flex: 200px 。

 .flex-container { display: flex; flex-flow: row wrap; gap: 8px; } .flex-item { flex: auto; padding: 32px; background-color: bisque; }

 <div class="flex-container"> <div class="flex-item">One</div> <div class="flex-item">Two</div> <div class="flex-item">Three</div> <div class="flex-item">Four</div> <div class="flex-item">Five</div> <div class="flex-item">Six</div> <div class="flex-item">Seven</div> <div class="flex-item">Eight</div> <div class="flex-item">Nine</div> <div class="flex-item">Ten</div> <div class="flex-item">Eleven</div> <div class="flex-item">Twelve</div> </div>

如果您想將div元素排列為列（從上到下），那么您的 flex 容器需要在其上設置一個height ，例如height: 500px 。 這是為了讓 flex 容器可以計算每列可以容納多少 flex 項目。

 .flex-container { display: flex; flex-flow: column wrap; height: 100vh; gap: 8px; } .flex-item { flex: auto; padding: 32px; background-color: bisque; }

 <div class="flex-container"> <div class="flex-item">One</div> <div class="flex-item">Two</div> <div class="flex-item">Three</div> <div class="flex-item">Four</div> <div class="flex-item">Five</div> <div class="flex-item">Six</div> <div class="flex-item">Seven</div> <div class="flex-item">Eight</div> <div class="flex-item">Nine</div> <div class="flex-item">Ten</div> <div class="flex-item">Eleven</div> <div class="flex-item">Twelve</div> </div>