我有兩種型別的元素：
- 輸入“A” - 文本塊
- 型別“B” - 圖形塊
我需要制作回應式布局，在小解析度下它應該是這樣的：
“A”“A”
“B”
，在更高解析度下它應該是這樣的：
“A”“B”“A”
您對如何完成或處理此任務有任何想法嗎？我正在使用tailwindcss，但可以使用純css
uj5u.com熱心網友回復：
您可以display: flex在父級上使用，然后給子級一個order. 然后，您可以使用媒體查詢根據 screenwith 更改順序。
.a {
order: 1;
}
.b {
order: 2;
}
@media screen and (min-width: 600px) {
.b {
order: 1;
}
}
除了顛倒彈性專案在視覺上的顯示順序之外，您還可以定位單個專案并使用 order 屬性更改它們在視覺順序中的顯示位置。
order 屬性旨在將專案按順序排列。這意味著為專案分配一個代表其組的整數。然后根據該整數以視覺順序放置專案，最低值在先。如果多個專案具有相同的整數值，則在該組中，專案按照源順序排列。
來源：https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property
uj5u.com熱心網友回復：
可能有更簡單的方法來做到這一點，但以下對我來說很好。
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-2 md:grid-cols-3">
<div class="bg-red-500 p-4 m-2 text-center">
A
</div>
<div class="bg-blue-500 p-4 m-2 text-center">
B
</div>
<div class="bg-green-500 p-4 m-2 col-span-2 w-1/2 mx-auto md:w-full md:col-span-1 text-center">
C
</div>
</div>在較大的螢屏上，它將是一個 3 列網格，在較小的螢屏上，它將是一個 2 列網格。由于 C 塊需要在中間，我給了它一個 col-span-2（它將覆寫整個第二行），我將它切成兩半并將其與中心對齊（w-1/2 m-auto） .
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397274.html
上一篇：樣式表：為什么背景不適用于標題？