css - 如何在 flex 容器中间隔 flex 元素？

我有一个 flex 容器，它沿着主轴的一行对齐子元素。我为它的 justify-content 设置了一个空格，以便在两个 div 之间保持一些空间。

我还给左边的 div 增加了 3，而右边的 div 保持不变为 1。

我的目标是在左侧显示一篇特色博客文章(因此 flex-grow 增加了 3)并在右侧显示侧边栏(因此 flex-grow 增加了 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>&copy; 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;
}


}

最佳答案

I have a flex container that's aligning the child elements along a row in the main-axis. I gave it a space-between for its justify-content in order to maintain some space between both divs.

I also gave the left div a flex-grow by 3, and the right div stayed constant at 1.

如您所知，justify-content 属性用于沿主轴对齐 flex 元素。

flex-grow 属性用于消耗主轴上的空闲空间。

你看到问题了吗？

如果您使用 flex-grow，所有可用空间都会被占用，并且 justify-content 无法工作，因为没有剩余空间来对齐元素。

My goal is to show a featured-blog post on the left (hence the flex-grow by 3) and the sidebar on the right (hence the flex-grow by 1). I also want there to be space between both divs.

所以不要使用flex-grow。使用 flex-basis 专门调整元素的大小。然后，如果您留下任何可用空间，您也可以使用 justify-content。

关于css - 如何在 flex 容器中间隔 flex 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41966050/

css - 如何在 flex 容器中间隔 flex 元素？

上一篇：jquery - 在为动态添加的元素绑定(bind)事件时，如何在 ID 选择器中使用通配符？

下一篇：css - 屏幕阅读器不阅读有序列表的元素符号和 CSS