Flexbox отзывчивая компоновка с несколькими боковыми панелями

Question

Есть ли способ с flexbox иметь 5 элементов, 4 из которых: 75% ширина контейнера, тогда элемент 4 равен 25% и отображается как боковая панель?

В конечном счете, я хочу взять товар 3 и превратить его в вторую боковую панель.

мобильный

|_container 1_| 
|_container 2_| 
|_container 3_| 
|___sidebar___| 
|_container 4_| 

настольный

|_container 1_|_sidebar_| 
|_container 2_|   | 
|_container 3_|   | 
|_container 4_|   | 

большой рабочий стол

|_container 1_|_container 4_|_sidebar_| 
|_container 2_|    |   | 
|_container 3_|    |   | 

Answer 1

Вот моя попытка достичь макета через Flexbox, в приведенном ниже примере изменяют размеры панели для просмотра эффекта:

EXAMPLE HERE

<div class="wrapper"> 
    <div class="item container-1">Container 1</div> 

    <div class="wrapper group"> 
    <div class="item container-2">Container 2</div> 
    <div class="item container-3">Container 3</div> 
    </div> 

    <aside class="item sidebar">Sidebar</aside> 
    <div class="item container-4">Container 4</div> 
</div> 

* { box-sizing: border-box; } 

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

/* Medium devices */ 
@media (min-width: 768px) { 
    .item { flex: 0 75%; } 
    .container-1 { order: -2; flex: 1 auto; } 
    .sidebar { order: -1; flex: 0 25%; } 
} 

/* Large devices */ 
@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%; } 
} 

Примечание: префиксы поставщиков необходимы для поддержки более ранних версий веб-браузеров, таких как IE10 (но не так стара, как IE9!). Я использовал Autoprefixer в demo (Спасибо Codepen!). Если вы нажмете на «Toggle Compiled View», вы увидите префиксную версию объявлений CSS.

Возможно, вы также захотите изменить контрольные точки @media запросов в соответствии с вашими потребностями.

наконец, но не в последнюю очередь, если вы не знакомы с CSS Flexible Box Layout Вы можете обратиться к следующим ресурсам:

• http://dev.w3.org/csswg/css-flexbox(Спецификация является вашим другом!)
• 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/