如何在flex容器中空间展开项目？

时间：2017-01-31 19:35:49

标签： css flexbox

我有一个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>&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;
}


}

2 个答案:

答案 0 :(得分：1)

  

我有一个flex容器，它将子元素沿主轴的一行对齐。我为其space-between提供了justify-content，以便在两个div之间保留一些空间。

     

我还给左侧div flex-grow 3，右侧div保持不变1。

如您所知，justify-content属性用于沿主轴对齐弹性项目。

flex-grow属性用于消耗主轴中的可用空间。

你看到了问题吗？

如果您使用flex-grow，则会消耗所有可用空间，并且justify-content无法使用，因为没有剩余空间来对齐项目。

  

我的目标是在左侧显示精选博客帖子（因此flex-grow显示3），右侧显示侧栏（因此flex-grow显示{{1} }）。我也希望两个div之间有空间。

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

答案 1 :(得分：0)

虽然Michael_B在技术上是正确的，但没有理由不能简单地将margin-right属性添加到.featured并在项目堆叠的媒体断点处将其删除。通过这种方式，您仍然可以利用flex-grow属性为您提供的比例大小。

相关问题
最新问题