Flexbox reaktionsfähiges Layout mit mehreren Seitenleisten

Question

Gibt es mit Flexbox eine Möglichkeit, 5 Elemente zu haben, von denen 4 eine Containerbreite von 75% haben, dann Element 4 hat 25% und wird als Sidebar angezeigt?

Letztendlich möchte ich Element 3 nehmen und es auch in eine 2. Seitenleiste verwandeln.

Handy

|_Container 1_|
|_Container 2_|
|_Container 3_|
|___Seitenleiste___|
|_Container 4_|

Desktop

|_Container 1_|_Seitenleiste_|
|_Container 2_|         |
|_Container 3_|         |
|_Container 4_|         |

Großer Desktop

|_Container 1_|_Container 4_|_Seitenleiste_|
|_Container 2_|             |         |
|_Container 3_|             |         |

Answer 1

Hier ist mein Versuch, das Layout über Flexbox zu erreichen. Verkleinern Sie das Ausgabefeld im untenstehenden Beispiel, um den Effekt zu sehen:

BEISPIEL HIER

  Container 1

    Container 2
    Container 3

  Sidebar
  Container 4

* { box-sizing: border-box; }

.wrapper { display: flex; flex-flow: row wrap; }
.item { text-align: center; padding: .3em; }
.group, .item { flex: 1 100%; }

/* Mittelgroße Geräte */
@media (min-width: 768px) {
  .item { flex: 0 75%; }
  .container-1 { order: -2; flex: 1 auto; }
  .sidebar { order: -1; flex: 0 25%; }
}

/* Große Geräte */
@media (min-width: 992px) {
  .item { flex: 1 50%; }
  .container-1 { order: -3; flex: 1 auto; }
  .container-4 { order: -2; flex: 0 25%; }
  .sidebar { order: -1; flex: 0 25%; }
  .group { flex: 0 50%; }
}

Hinweis: Herstellerpräfixe werden benötigt, um frühere Versionen von Webbrowsern wie IE10 zu unterstützen (aber nicht so alt wie IE9!). Ich habe Autoprefixer in der Demo verwendet (Danke an Codepen!). Wenn Sie auf "Toggle Compiled View" klicken, sehen Sie die vorversionierte Version der CSS-Deklarationen.

Sie möchten möglicherweise auch die Breakpoints der @media-Abfragen ändern, um Ihren Anforderungen gerecht zu werden.

Zu guter Letzt, wenn Sie nicht mit dem CSS Flexible Box Layout vertraut sind, können Sie sich an folgende Ressourcen wenden:

• http://dev.w3.org/csswg/css-flexbox (Die Spezifikation ist Ihr Freund!)
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
• http://www.html5rocks.com/en/tutorials/flexbox/quick/
• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://weblog.bocoup.com/dive-into-flexbox/