Skip to content Skip to sidebar Skip to footer
Home / Css / Flexbox / Html

How Do I Fill Up The Page Grid And Lay Out The Content Widths In A Single Column?

Post a Comment
I'm trying to create flex box columns for web development. However, all I managed to do is produce one column of flex boxes. What are some basic CSS codes that would verify that th

Solution 1:

On your section CSS, change flexbox to flex and it shall work.

@charset "utf-8";

/*
      CSS Code
    */

section {
  display: flex; /* Change from flexbox to flex */
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

div.card {
  display: flex;
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
<!doctype html>
<html lang="en">

<head>
  <!--
      HTML Code  
       -->
  <meta charset="utf-8">
  <title>Coding Challenge 5-2</title>
  <link href="code5-2_layout.css" rel="stylesheet" />
  <link href="code5-2_flex.css" rel="stylesheet" />
</head>

<body>

  <h1>Social Media Sites</h1>

  <section>
    <div class="card">
      <header>
        <h1>Facebook</h1>
      </header>
      <img src="facebook.png" alt="Facebook" class="icon" />
      <footer>238,150 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>Twitter</h1>
      </header>
      <img src="twitter.png" alt="Twitter" class="icon" />
      <footer>48,871 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>Instagram</h1>
      </header>
      <img src="instagram.png" alt="Instagram" class="icon" />
      <footer>171,244 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>GooglePlus</h1>
      </header>
      <img src="google-plus.png" alt="GooglePlus" class="icon" />
      <footer>64,288 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>YouTube</h1>
      </header>
      <img src="youtube.png" alt="YouTube" class="icon" />
      <footer>Subscribe to our Channel</footer>
    </div>
    <div class="card">
      <header>
        <h1>Vimeo</h1>
      </header>
      <img src="vimeo.png" alt="Vimeo" class="icon" />
      <footer>Get the Vimeo Feed</footer>
    </div>
    <div class="card">
      <header>
        <h1>Skype</h1>
      </header>
      <img src="share.png" alt="Skype" class="icon" />
      <footer>Join a Skype Chat</footer>
    </div>
    <div class="card">
      <header>
        <h1>Pinterest</h1>
      </header>
      <img src="pinterest.png" alt="Pinterest" class="icon" />
      <footer>Create your Page</footer>
    </div>
    <div class="card">
      <header>
        <h1>Bloggr</h1>
      </header>
      <img src="bloggr.png" alt="Bloggr" class="icon" />
      <footer>Subscribe to our Feed</footer>
    </div>
    <div class="card">
      <header>
        <h1>Tumblr</h1>
      </header>
      <img src="tumblr.png" alt="Tumblr" class="icon" />
      <footer>Get Daily Updates</footer>
    </div>
    <div class="card">
      <header>
        <h1>Share</h1>
      </header>
      <img src="share.png" alt="Share" class="icon" />
      <footer>Share our Content</footer>
    </div>
    <div class="card">
      <header>
        <h1>E-mail</h1>
      </header>
      <img src="email.png" alt="email" class="icon" />
      <footer>E-mail Us!</footer>
    </div>
  </section>
</body>

</html>

You may like these posts

Post a Comment for "How Do I Fill Up The Page Grid And Lay Out The Content Widths In A Single Column?"