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

橙色条里面有一点动态内容，所以我不能设置静态宽度，棕色、紫色、粉红色和红色部分应该使用橙色条不占用的任何宽度（I' m 假设为flex-grow: 1;)。

无论如何，我如何获得这个布局（在侧边栏中），我试图将东西拉伸到 100% 的高度和 100% 的宽度？我可以只使用 flexbox 来做到这一点，还是必须使用定位/浮动元素才能让这一切正常工作？

很抱歉含糊不清，但在尝试了几件事后却无处可去，我不知道从哪里开始。谢谢。

Answer 1

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

通过在 html 和 body 上设置 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>