使用 flexbox 的 3 列流体布局 第三列向左推

Posted

技术标签:

【中文标题】使用 flexbox 的 3 列流体布局 第三列向左推【英文标题】:3 column fluid layout using flexbox 3rd column pushing to the left 【发布时间】:2017-05-24 06:21:48 【问题描述】:

我正在尝试使用 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>

问题出在此处:每当页面有点空时,它就不会保留所需的宽度。旁边的 div 将尽可能向左推。 此外,看起来页眉高度和页脚高度不占屏幕尺寸的 15%。

任何指向正确方向的指针? 提前致谢

【问题讨论】:

虽然您提供了一些代码,但您还没有为您的问题创建minimal reproducible example。由于这主要是与CSS 相关的问题,因此最好添加一些允许任何人体验该错误的有效 html 标记,因为解决此问题不需要了解用于生成标记的特定框架。确保您还阐明了所需的行为。除非你这样做,否则我们帮不上什么忙。 【参考方案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>

【讨论】:

以上是关于使用 flexbox 的 3 列流体布局 第三列向左推的主要内容,如果未能解决你的问题,请参考以下文章

css3笔记4 盒模型, flex 弹性布局,三列布局

使用 flexbox 如何防止特定元素继承 flex 布局?

如何使用 Twitter Bootstrap v3.0 构建两列流体布局

#yyds干货盘点# 前端歌谣的刷题之路-第一百五十一题-三列布局 - 圣杯布局

如何使用 flexbox 动态地进行 3 列 3 行的布局

html Flexbox:三列具有居中内容