如何使用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>

然后是上面标记的以下 starting 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;，我能够在没有橙色条的情况下使该部分正常工作。但是，一旦添加了橙色条，我就不知道如何继续做我正在做的事情。

橙色条中包含一些动态内容，因此我无法设置静态宽度，棕色，紫色，粉红色和红色部分应使用橙色条不占用的任何宽度（我m假设使用flex-grow: 1;）。

无论如何，如何将布局扩展到边栏内（我想将东西拉伸到高度的100％和宽度的100％）？我可以只用flexbox来做到这一点吗，还是我必须使用定位/浮动元素才能使这一切正常工作？

很抱歉，您仍然不清楚，但是尝试了几件事并且走得很近之后，我不确定从哪里开始。谢谢。

Answer 1

您需要在某些元素上使用flex-direction: column来堆叠子代。另外，使用flex: 1将强制该元素增长并填充其父元素中的可用空间。

通过在HTML和正文上设置height: 100%，您可以将.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>