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><htmllang="en"><head><!--
      HTML Code  
       --><metacharset="utf-8"><title>Coding Challenge 5-2</title><linkhref="code5-2_layout.css"rel="stylesheet" /><linkhref="code5-2_flex.css"rel="stylesheet" /></head><body><h1>Social Media Sites</h1><section><divclass="card"><header><h1>Facebook</h1></header><imgsrc="facebook.png"alt="Facebook"class="icon" /><footer>238,150 followers</footer></div><divclass="card"><header><h1>Twitter</h1></header><imgsrc="twitter.png"alt="Twitter"class="icon" /><footer>48,871 followers</footer></div><divclass="card"><header><h1>Instagram</h1></header><imgsrc="instagram.png"alt="Instagram"class="icon" /><footer>171,244 followers</footer></div><divclass="card"><header><h1>GooglePlus</h1></header><imgsrc="google-plus.png"alt="GooglePlus"class="icon" /><footer>64,288 followers</footer></div><divclass="card"><header><h1>YouTube</h1></header><imgsrc="youtube.png"alt="YouTube"class="icon" /><footer>Subscribe to our Channel</footer></div><divclass="card"><header><h1>Vimeo</h1></header><imgsrc="vimeo.png"alt="Vimeo"class="icon" /><footer>Get the Vimeo Feed</footer></div><divclass="card"><header><h1>Skype</h1></header><imgsrc="share.png"alt="Skype"class="icon" /><footer>Join a Skype Chat</footer></div><divclass="card"><header><h1>Pinterest</h1></header><imgsrc="pinterest.png"alt="Pinterest"class="icon" /><footer>Create your Page</footer></div><divclass="card"><header><h1>Bloggr</h1></header><imgsrc="bloggr.png"alt="Bloggr"class="icon" /><footer>Subscribe to our Feed</footer></div><divclass="card"><header><h1>Tumblr</h1></header><imgsrc="tumblr.png"alt="Tumblr"class="icon" /><footer>Get Daily Updates</footer></div><divclass="card"><header><h1>Share</h1></header><imgsrc="share.png"alt="Share"class="icon" /><footer>Share our Content</footer></div><divclass="card"><header><h1>E-mail</h1></header><imgsrc="email.png"alt="email"class="icon" /><footer>E-mail Us!</footer></div></section></body></html>

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