Как мне создать этот макет, используя CSS flexbox?

Question

Я пытаюсь создать следующий базовый макет:

И в настоящее время я использую следующую базовую разметку HTML (с немного отличающимисяимена классов и дополнительная разметка в каждом из элементов HTML):

<div class="siteContainer">
    <div class="sidebar">
        <div class="topGreenStrip">
        </div>
        <div class="sidebarContainer">
            <div class="sidebarInnerContainer">
                <div class="brownSection">
                </div>
                <div class="purpleSection">
                </div>
                <div class="pinkSection">
                </div>
                <div class="redSection">
                </div>
            </div>
            <div class="rightOrangeStrip">
            </div>
        </div>
    </div>
    <div class="lightPurpleContent">
    </div>
</div>

А затем следующий начальный CSS для разметки выше:

.sidebar {
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    top: 0;
    width: 300px;
}

.topGreenStrip {
    height: 5px;
    justify-self: flex-start;
}

.sidebarContainer {
    flex-grow: 1;
    justify-self: stretch;
}

ПроблемаЯ имею в виду, что, поскольку я начинаю растягивать все по вертикали с помощью flexbox, я не знаю, как затем растягивать все по горизонтали, но все равно сохраняю все на 100% высоты экрана.

То есть минусзеленая верхняя полоса 5px, я хочу, чтобы оставшаяся часть боковой панели занимала 100% высоты экрана.Большая розовая секция должна заполнить то, что коричневая, фиолетовая и красная секции не имеют естественного характера.

Я смог заставить эту часть работать без оранжевой полосы, используя justify-self: flex-start;, justify-self: stretch; и justify-self: flex-end;.Однако, как только я добавляю оранжевую полосу, я не знаю, как продолжать делать то, что делаю.

Оранжевая полоса содержит немного динамического содержимого, поэтому я не могу установитьстатическая ширина, а коричневые, фиолетовые, розовые и красные секции должны использовать любую ширину, не занятую оранжевой полосой (я предполагаю с flex-grow: 1;).

В любом случае, как мне получить этот макетгде (внутри боковой панели) я пытаюсь растянуть вещи как до 100% высоты, так и до 100% ширины?Могу ли я сделать это только с помощью flexbox, или мне придется использовать позиционированные / плавающие элементы, чтобы все это заработало?

Извините за неопределенность, но, попробовав несколько вещей и не приблизившись, я 'Я не уверен, с чего начать.Спасибо.

Answer 1

Вам нужно использовать flex-direction: column для определенных элементов, чтобы сложить дочерние элементы.Кроме того, использование flex: 1 заставит этот элемент расти и заполнить доступное пространство в его родительском элементе.

Установив height: 100% в html и body, вы можете растянуть .siteContainer на всю высоту окна..

Я добавил цвета фона, чтобы вы могли видеть макет в действии.

html,
body {
  margin: 0;
  height: 100%;
}

.siteContainer {
  display: flex;
  height: 100%;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.topGreenStrip {
  height: 5px;
}

.sidebarContainer {
  flex: 1;
  display: flex;
}

.sidebarInnerContainer {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pinkSection,
.lightPurpleContent {
  flex: 1;
}

.topGreenStrip { background: green; }
.brownSection { background: peru; }
.purpleSection { background: darkviolet ; }
.pinkSection { background: pink; }
.redSection { background: red; }
.rightOrangeStrip { background: orange; }
.lightPurpleContent { background: lavender; }

<div class="siteContainer">
    <div class="sidebar">
        <div class="topGreenStrip">green
        </div>
        <div class="sidebarContainer">
            <div class="sidebarInnerContainer">
                <div class="brownSection">brown
                </div>
                <div class="purpleSection">purple
                </div>
                <div class="pinkSection">pink
                </div>
                <div class="redSection">red
                </div>
            </div>
            <div class="rightOrangeStrip">orange
            </div>
        </div>
    </div>
    <div class="lightPurpleContent">lightpurple
    </div>
</div>