Flexbox側邊欄可以共享一個新行嗎？

在媒體查詢之後，我可以讓flexbox sidebar共享一個新行嗎？Flexbox側邊欄可以共享一個新行嗎？

之前（上寬屏幕）

+---+-------+---+ 
| |  | | 
| L | Main | R | 
| |  | | 
+---+-------+---+

後（上窄屏幕）

+-------+ 
|  | 
| Main | 
|  | 
+-------+ 
| | | 
| L | R | 
| | | 
+-------+

HTML（此前有媒體查詢不可更改）

<div class="container"> 
    <div class="sideLeft">L</div> 
    <div class="MainContent">Main</div> 
    <div class="sideRight">R</div> 
</div>

來源

2016-11-16 iantresman

什麼是你的CSS是什麼樣子？ – isherwood

是的，你可以。 – MassDebates

我沒有達到CSS的水平，因爲我不知道Flexbox模型是否可以做到這一點。我知道它可以以任意順序將它們疊在一起。但這是我的第一次嘗試：https://jsfiddle.net/0tb5yyto/ 我也嘗試添加flex-wrap：nowrap – iantresman

您可以更改order: -1main div與媒體查詢。您還需要在container元素上設置flex-wrap: wrap。此外calc(% - 10px)是雙方爲5px的margin，但如果你不想要的利潤，你可以只使用％，你可以SE here

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
    border: 1px solid gray; 
 
    padding: 5px 
 
} 
 
.container > div { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    flex: 1; 
 
} 
 
div.main { 
 
    flex: 3; 
 
} 
 
@media(max-width: 480px) { 
 
    div.main { 
 
    order: -1; 
 
    flex: 0 0 calc(100% - 10px); 
 
    } 
 
    .container > div:not(.main) { 
 
    flex: 0 0 calc(50% - 10px); 
 
    } 
 
}

<div class="container"> 
 
    <div class="sideLeft">L</div> 
 
    <div class="main">Main</div> 
 
    <div class="sideRight">R</div> 
 
</div>

來源

2016-11-16 14:44:15

謝謝你，你是一個天才。現在我只需要了解你做了什麼，以及它爲什麼起作用！這比我預想的要複雜得多。 – iantresman

不客氣，它不那麼難，你可以在這裏閱讀更多關於它的信息https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes –

Flexbox側邊欄可以共享一個新行嗎？

回答

相關問題