我正在尝试使用 CSS flexbox 属性进行布局。 我正在尝试设计一个 3 列的流体布局,但我的尝试似乎并不重要。样式表如下。
一些背景资料: 我正在使用 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%。
有没有指向正确方向的指示? 提前致谢
最佳答案
如果我没有误会,我想这就是你想要的:
.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>
关于c# - 使用 flexbox 的 3 列流体布局第 3 列向左推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41557353/