VED*_*095 44 css article spacing flexbox
我有一个奇怪的问题,我遇到了麻烦.所以我一直在研究使用flexbox的原型html5模板.虽然我遇到了一个小问题.我正在尝试通过将"justify-content"属性应用于父div来向模板的侧边栏和内容区域留出一小块空间.虽然它没有在侧边栏和内容区域之间添加空格.我不确定我做错了什么.所以,如果有任何可以帮助我,这将是伟大的.提前致谢!
这是我的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../scripts/javascript/responsive_drop_down.js"></script>
<link href="../css/protoflexcss.css" rel="stylesheet" type="text/css" media="screen"/>
<title>Welcome to My Domain</title>
</head>
<body>
<header>
<h1>This is a placeholder <br />
for header</h1>
</header>
<nav class="main">
<div class="mobilmenu"></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Other Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<div id="wrapper">
<article class="content-main">
<section>
<h2>Heading goes here...</h2>
<time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time>
<p>Content will go here...</p>
</section>
</article>
<aside>
<p>More content soon...</p>
</aside>
</div>
<footer>
<div class="copyright">
<span>All rights reserved 2014.</span>
</div>
<nav class="foot">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Other Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</footer>
</body>
</html>
这是相关的CSS:
#wrapper
{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: row wrap;
flex: 1 100%;
width:92.5%;
align-self: center;
padding-top: 3.5em;
padding-bottom: 2.5em;
margin: 0;
}
#wrapper article.content-main
{
flex: 6;
order: 2;
}
#wrapper article.content-main section
{
background-color: rgba(149, 21, 130, 0.61);
border: 2px solid #c31cd9;
padding: 0.9em;
}
#wrapper aside
{
flex: 1;
padding: 0.4em;
background-color: rgba(17, 208, 208, 0.56);
border: 2px solid #15d0c3;
position: sticky;
}
注意:如果任何人需要我的任何其他与我的HTML的任何其他元素相关的css代码,请告诉我,我也很乐意将其添加到问题中.
dho*_*ert 92
justify-content 只有在柔性物品弯曲以吸收自由空间后仍留有空间时才会产生效果.在大多数情况下,没有任何可用空间,实际上justify-content什么都不做.
它会产生影响的一些例子:
如果您的弹性项目都不灵活(flex: none或flex: 0 0 auto),并且小于容器.
如果您的柔性物品是灵活的,但由于max-width每个柔性物品上的物品都不能吸收所有自由空间.
在这两种情况下,justify-content都将负责分配多余的空间.
但是,在您的示例中,您拥有具有flex: 1或flex: 6没有max-width限制的弹性项目.你的灵活物品将会增长,以吸收所有的自由空间,并且没有空间justify-content可以做任何事情.
tec*_*yle 20
这个答案可能很愚蠢,但我花了一些时间来找出类似的问题.
发生了什么事我是我没设置display: flex到容器中.当然,justify-content没有那个属性也行不通.
小智 11
当有一个来自CMS的现有代码时,我还有一个问题让我感到困惑.我想使用flexbox justify-content:space-between但左右元素不是齐平的.
在该系统中,物品浮动并且容器在开始或结束时具有:before和/或:after清除浮子.因此,设置这些偷偷摸摸:before和:after元素,display:none并获得成功.
小智 7
我在 justify-content 上遇到了很多问题，我发现问题是“margin: 0 auto”
auto 部分覆盖 justify-content，因此它总是根据边距而不是 justify-content 显示。