使用flexbox实现的三列流体布局，第三列向左推移。

Question

我正在尝试使用CSS flexbox属性创建流动布局。 我试图设计一个三列流动布局，但我的尝试似乎不太准确。样式表如下所示。

一些背景信息： 我正在c# ASP.NET中进行设计。因此，我的HTML中有一些代码，使得拥有带有主布局的可变内容变得容易（对我来说）。基本上，只有在菜单点击时内容会改变，而网站其他部分则保持不变。

.MainContainer{
display: flex;
flex-direction: column;
border-style: solid; /*Debugging purposes*/
}

.ContentContainer{
width: 100%;
fill:aliceblue;
display: flex;
flex-direction: row;
border-style: solid; /*Debugging purposes*/
}

.header{
width: 100%;
height: 15%;
text-align: center;
border-style: solid; /*Debugging purposes*/
}

.footer{
width: 100%;
height: 15%;
text-align: center;
border-style: solid; /*Debugging purposes*/
 }

.navbar{
display: flex;
width: 15%;
align-self: stretch;
align-items: center;
flex-direction: column;
padding:2px;
margin: 10px;

min-width: 15%;

border-style: solid; /*Debugging purposes*/
 }

.content{
display: flex;
align-self: stretch;
width: 95%;
padding:10px;
margin: 10px;
text-align: justify;

min-width: 90%;
overflow:hidden;

border-style: solid; /*Debugging purposes*/
}

.aside{
display: flex;
width: 15%;
align-self: stretch;
align-items: center;
flex-direction: column;
margin: 10px;
padding: 10px;

min-width: 15%;

border-style: solid; /*Debugging purposes*/
}

HTML编码:

<div class="header">This is the Header space</div>

<div class="ContentContainer">
    <nav class="navbar">
        <a href="Home.aspx">Home</a>
        <a href="About.aspx">About</a>
        <a href="Contact.aspx">Contact</a>
    </nav>

<%--    start of variable content--%>
    <form id="form1" runat="server">
        <div class="content">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>
        </div>
    </form>
<%--    end of variable content--%>

    <div class="aside">Content Area for Latest items.</div>
</div>

<div class="footer">Tis is the Footer space</div>

问题在于：如果页面内容较少，它将无法保持所需宽度。带有aside标签的div会尽可能地向左推。此外，页眉和页脚的高度似乎没有占据屏幕15％的尺寸。

请问需要哪方面的指导？

提前感谢。

- Frank van Zutphen

---

虽然您提供了一些代码，但您还没有创建一个关于您的问题的最小可复现示例（MCVE）。由于这主要是与CSS相关的问题，因此最好添加一些有效的HTML标记，以便任何人都可以体验到该错误，因为解决此问题不需要了解您用于生成标记的特定框架。确保您还澄清所需的行为。除非您这样做，否则我们无法提供太多帮助。 - tao

Answer 1

如果我没有误解，我想这就是你想要的：

.MainContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ContentContainer{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.header{
  display: flex;
  justify-content: center;
  width: 100%;
  height: 15%;
  text-align: center;
  border-style: solid; /*Debugging purposes*/
}

.footer{
  display: flex;
  justify-content: center;
  width: 100%;
  height: 15%;
  text-align: center;
  border-style: solid; /*Debugging purposes*/
 }

.navbar{
  display: flex;
  width: 15%;
  align-items: center;
  flex-direction: column;
  padding:2px;
  margin: 10px;
  border-style: solid; /*Debugging purposes*/
}

.content{
  display: inline-block;
  flex: 1;
  padding:10px;
  margin: 10px;
  text-align: justify;
  border-style: solid; /*Debugging purposes*/
}

.aside{
  display: flex;
  width: 15%;
  align-items: center;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  border-style: solid; /*Debugging purposes*/
}

<div class="MainContainer">
  <div class="header">This is the Header space</div>
  <div class="ContentContainer">
 <nav class="navbar">
   <a href="Home.aspx">Home</a>
   <a href="About.aspx">About</a>
   <a href="Contact.aspx">Contact</a>
 </nav>
 <div class="content">
 </div>
 <div class="aside">Content Area for Latest items.</div>
  </div>

  <div class="footer">Tis is the Footer space</div>
</div>

- Facundo La Rocca