當我遇到某個斷點時，我想將我的<aside>元素移動到我的元素下方main，但不確定我可以使用 flexbox 的哪些功能來實作它。我已經包含了一個應該很容易理解的代碼片段。有任何想法嗎？
* {
box-sizing: border-box;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
display: flex;
}
main {
flex: 2;
background-color: #181818;
color: white;
padding: 5px;
min-height: 50vh;
}
aside {
flex: 1;
background-color: #ddd;
padding: 5px;
}<div class="wrapper">
<main>Main content here</main>
<aside>Secondary content here</aside>
</div>uj5u.com熱心網友回復：
您可以flex-direction在media查詢中使用該屬性
* {
box-sizing: border-box;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
display: flex;
}
main {
flex: 2;
background-color: #181818;
color: white;
padding: 5px;
min-height: 50vh;
}
aside {
flex: 1;
background-color: #ddd;
padding: 5px;
}
@media (max-width: 768px) {
.wrapper {
/* Changes from row to column */
flex-direction: column;
}
}<div class="wrapper">
<main>Main content here</main>
<aside>Secondary content here</aside>
</div>uj5u.com熱心網友回復：
嘗試 display:flex; flex-wrap:wrap;
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328508.html