我有一个flex容器，它将子元素沿主轴的一行对齐 . 为了在两个div之间保持一些空间，我为它的正当内容给了它一个空格 .
我也给了左边的div一个flex-grow 3，而右边的div保持不变为1 .
我的目标是在左侧显示一个精选博客帖子（因此灵活增长3）和右侧的侧边栏（因此灵活增长1） . 我也希望两个div之间有空间 .
我的代码不允许两个div共享它们之间的空间，因为它们彼此相邻 .
这是我的代码：
<body>
<nav role="navigation">
<ul>
<li><a href="articles.htm" title="Articles">Articles</a></li>
<li><a href="newsletter.htm" title="Newsletter">Newsletter</a></li>
<li><a href="interest.htm" title="generic interest">Generic Interest</a></li>
<li><a href="resources.htm" title="resources">Resources</a></li>
<li><a href="about.htm" title="learn more about me">About</a></li>
<li class="search-form">
<form action="http://simplerpimate.com" method="post">
<label for="search">Search Generic Blog</label>
<input type="search" placeholder="search" title="Search" class="q" name="search" id="search">
<input type="submit" class="button" value="Go" name="submit">
</form>
</li>
</ul>
</nav>
<header role="banner">
<hgroup>
<h1>Generic<span class="generic">Blog</span></h1>
<h2>every post a champion</h2>
</hgroup>
</header>
<section role="main" class="main">
<article class="featured">
<h2>Featured Article</h2>
<h3 class="articleHeader teaser">Lorem Ipsum turns 520</h3>
<img src="_images/lorem_title.jpg" alt="moving from print to the web" class="teaser">
<p>This year marks the 520th year of Lorem Ipsum text. In that sense, Lorem Ipsum may be the most successfull generic content ever. While we may never know the name of the anonomous typesetter that scrambled the galley of type that created Lorem Ipsum,
we are all in debt to his visionary use of generic type. Without Lorem Ipsum, countless wireframes, mockups, and prototypes would lack the generic look and feel that make them so compelling to consumers world-wide.<span class="action"><a href="featured.htm" title="featured article">continue reading</a></span></p>
</article>
<aside role="complementary" class="sidebar">
<section class="intro">
<p>Generic Blog seeks to keep you up to date on the most generic items out there. We want to be your main source for all generic interests and actvities.
<span class="call">Welcome</span></p>
</section>
<ul class="social">
<li><a href="https://twitter.com/jameswillweb" title="Follow me on Twitter" class="twitter">Follow me on Twitter</a></li>
<li><a href="http://www.simpleprimate.com/feed/ " title="RSS Feed" class="rss">Subscribe to my RSS Feed</a></li>
</ul>
<section class="newsletter cf">
<h3>Our Newsletter</h3>
<p>Interested in keeping up to date with what’s going on in the world of generic content? Sign up for our monthly newsletter and never miss out on your favorite generic news.</p>
<p> <a href="#newsletter" class="button right cf">Sign up!</a>
</p>
</section>
<section class="events">
<h3>Upcoming Events</h3>
<p>GeneriCon will be held June 20th of this year. They’ll have an amazing line up of generic speakers and topics, so be sure not to miss out!</p>
</section>
</aside>
</section>
<section class="spotlight">
<article class="latest news">
<h2>Featured News</h2>
<div class="img-wrap"><img src="_images/flower.jpg" alt="responsive images community group"></div>
<h3>Generic drugs keep gaining market share</h3>
<p>Generic drugs, such as Marzipan Imoximile made from the Harvey Cactus flower (shown above) continue to gain in market share.</p>
<p class="call"><a href="http://responsiveimages.org/" title="Responsive images community group" class="button">Find out why!</a></p>
</article>
<article class="latest course">
<h2>Generic item of the week</h2>
<div class="img-wrap"><img src="_images/city_night.jpg" alt="responsive design fundamentals"></div>
<h3>Generic “city at night” shots remain popular</h3>
<p>For many ads and commercials, generic “city at night shots” remain amazingly effective. Come find out which cities offer the most generic shots.</p>
<p class="call"><a href="http://www.lynda.com/Web-Responsive-Design-tutorials/Responsive-Design-Fundamentals/104969-2.html" title="Responsive Design Fundamentals" class="button">Mash!</a></p>
</article>
<article class="latest review">
<h2>Generic facts</h2>
<div class="img-wrap"><img src="_images/beach_yoga.jpg" alt="the truth about HTML5"></div>
<h3>Beach yoga no more effective than generic yoga</h3>
<p>Despite the claims of many self-help gurus, beach yoga is no more effective at finding inner peace than generic yoga. An online study shows more.</p>
<p class="call"><a href="http://www.truthabouthtml5.com/" title="The truth about HTML5" class="button">Mash!</a></p>
</article>
</section>
<footer role="contentinfo">
<p>© 2012 James Williamson | but honestly just use any of the code as you see fit. I'm really putting this here just so I have a footer.</p>
</footer>
</body>
/* --------------------------------------------------
flexbox layout styles
-----------------------------------------------------*/
body {
width: 90%;
margin: 0 auto;
}
/* --------------------------------------------------
top navigation styles
-----------------------------------------------------*/
nav ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav li {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-pack: center;
align-items: center;
}
nav li.search-form {
margin-left: auto;
margin-right: 1em;
}
/* --------------------------------------------------
header styles
-----------------------------------------------------*/
header hgroup {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: baseline;
-ms-flex-pack: baseline;
align-items: baseline;
}
/* --------------------------------------------------
main content styles
-----------------------------------------------------*/
section.main {
margin-bottom: 2em;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
/*.featured, .sidebar{
margin: 4%;
}*/
.featured {
flex: 3;
background: green;
}
.sidebar {
background: red;
margin-left: auto;
flex: 1;
/*margin-right: 2em;*/
}
ul.social {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
justify-content: space-around;
}
/* --------------------------------------------------
spotlight content styles
-----------------------------------------------------*/
.spotlight {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.latest{
flex: 1;
}
/*.latest {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
flex-direction: column;
}*/
/* --------------------------------------------------
footer styles
-----------------------------------------------------*/
footer {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 4em;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/* --------------------------------------------------
Smaller screen styles
-----------------------------------------------------*/
@media only screen and (max-width: 720px) {
/*set direction to single column, set ordinal values*/
body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
nav {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
header {
-webkit-order: 0;
-ms-flex-order: 0;
order:0;
}
.main {
-webkit-order: 2;
-ms-flex-order: 2;
order:2;
}
.spotlight {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
footer {
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
}
/* --------------------------------------------------
top navigation styles
-----------------------------------------------------*/
nav ul {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
nav li.search-form {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
margin: 0 0 2em;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
/* --------------------------------------------------
header styles
-----------------------------------------------------*/
header hgroup {
-webkit-align-items: center;
-ms-flex-pack: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
/* --------------------------------------------------
main content styles
-----------------------------------------------------*/
section.main {
display: block;
margin-bottom: 2em;
}
.sidebar {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 0;
}
.intro {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
margin-top: 2em;
}
.social {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
margin-top: 1em;
}
.newsletter {
-webkit-order: 0;
-ms-flex-order: 0;
flex-order: 0;
margin-bottom: 1em;
}
.events {
-webkit-order: 1;
-ms-flex-order: 1;
flex-order: 1;
}
/* --------------------------------------------------
spotlight content styles
-----------------------------------------------------*/
.spotlight {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.news {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.course {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.review {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
}
2 回答
如您所知，
justify-content属性用于沿主轴对齐弹性项目 .flex-grow属性用于消耗主轴中的可用空间 .你看到了问题吗？
如果使用
flex-grow，则会消耗所有可用空间，并且justify-content无法工作，因为没有剩余空间来对齐项目 .所以不要使用
flex-grow. 使用flex-basis来专门调整项目的大小 . 然后，如果您留下任何可用空间，也可以使用justify-content.虽然Michael_B在技术上是正确的，但没有理由你不能简单地将
margin-right属性添加到.featured并在项目堆栈的媒体断点处将其删除 . 通过这种方式，您仍然可以利用flex-grow属性为您提供的比例大小 .