Reputation: 535

How to space flex items within a flex container?

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.

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.

My code doesn't enable for both divs to share space between them as they are touching next to each other.

here is my code:

<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;
}


}

Upvotes: 3

Answers (2)

brogrammer

Reputation: 874

While Michael_B is technically correct, there is no reason you can't simply add margin-right property to .featured and remove it at the media breakpoint at which the items stack. This way you can still capitalize on the proportional sizing of that the flex-grow property affords you.

Upvotes: 0

Michael Benjamin

Reputation: 372059

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.

The justify-content property, as you know, is used to align flex items along the main axis.

The flex-grow property is used to consume free space in the main axis.

Do you see the problem?

If you use flex-grow, all free space is consumed, and justify-content cannot work because there's no space left to align items.

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.

So don't use flex-grow. Use flex-basis to specifically size the items. Then, if you leave any free space, you can use justify-content, as well.

Upvotes: 1

How to space flex items within a flex container?

Answers (2)

Related Questions