teaching machines

CS 318: Lab 22 – Flexbox

April 25, 2018 by Chris Johnson. Filed under cs318, lectures, spring 2018.

Dear students,

Today we hit up the new Flexbox system of CSS. In short, Flexbox allows us to control the distribution, alignment, order, and expansion of a bunch children within their parent. It replaces many of the hacks of float and Javascript to achieve certain layouts.

We’re going to dive right into the lab today.

Here’s your TODO list:

• Would you like another workday on Monday? Please be working in prototype2 and have made progress since prototype1.

See you next time!

Sincerely,

Lab

Our goal today is to use Flexbox to create two layouts that would be either impossible or absurdly difficult to orchestrate without it.

First create a lab22 directory. Add a partners.html and include your first names and last initials.

Tiles

In this first exercise, we’ll create a gallery of images all of different sizes but which nicely interlock. Like this:

Follow these steps to produce your gallery:

• Write all HTML in tiles.html and CSS in tiles.css.
• Set all elements’ box-sizing property to border-box.
• Create a div with an id of gallery.
• Nest inside div a bunch of img elements. Instead of downloading enough images to fill the screen, use Lorem Picsum. Read the directions on the site and set the src attributes of your img elements to load in images of width 200 and varying heights. Use a different height value for each image.
• We’re done in the HTML. The rest is all CSS. Take a moment to appreciate that the HTML can be some simple and unconcerned with the layout.
• Have gallery fill the browser window using fixed positioning. Each edge of gallery should match up to the corresponding edge of the browser.
• When gallery has more content than fits in the browser window, the content gets cut off. Set overflow so you can scroll through the excess content.
• Round off the corners of each image.
• Add some shadowing behind each image.
• Add some margin around each image.
• To arrange the images within gallery, we want it to be a flex-container. Set its display property to flex.
• We want the images to fill in columns. Set the flex-direction accordingly. Once a column is full, we want to wrap the images over into the next column. Set flex-wrap accordingly.
• The columns are probably ragged, meaning that they don’t all have the exact same height. We can fix this! A flex-item can be made to expand to fill its flex container. Set the flex-grow property on the images to some non-zero value. (Usually we set this with the shorthand flex property.) If all the children of a flex-container have the same flex-grow, they will all expand at the same rate when there’s extra space.
• The step you just completed scales up the images vertically, but not horizontally. Non-uniform scaling causes images to appear distorted. Set the object-fit property of the images to cover, which renders the images so they fill their box completely without violating their aspect ratio. We did something similar with background images in a previous lab.
• When an image is hovered, scale it up.
• Animate the scaling with a CSS animation.

Blog

In this second exercise, we’ll create a prototype of a standard blog layout that has three columns with a header and a footer:

This particular layout is sometimes called the holy grail—because a lot of sites have pursued it, and it has been hard to achieve with standard CSS. But then Flexbox came along.

Your blog will look something like this:

Follow these steps to produce your blog:

• Write all HTML in blog.html and CSS in blog.css.
• Set all elements’ box-sizing property to border-box.
• Create a header for the top, a div with an id of middle for the middle row, and footer. I suggest you temporarily give them distinctive background colors so that you can see the structure of your layout as you tweak the flex properties.
• Add a title in the header and a social media icon in the footer. Add padding as needed. But not margin. The background color doesn’t appear behind the margin.
• Zero out the margin on body to remove the gap around your page.
• We want to distribute out these three elements across body, so make body a flex-container. Have it layout its flex-items in a column.
• To ensure that the footer always gets shoved to the bottom of the page, set the min-height of body to 100vh. When you have little content, this will keep the footer from awkwardly rising up from the bottom of the page.
• Have middle be the only element that expands to fill the extra space of the flex-container. Set flex-grow to 1, while the header and footer remain at the default of 0.
• In middle, add a div with an id of left, a main, and a div with an id of right. Give them each distinct background colors so that you can see what’s going on. Add some dummy content so the elements don’t collapse.
• We want middle to distribute its child elements in Flexbox-ish way, so it too must be a flex-container. Set its display and flex-direction properties.
• Only main should expand. Set the flex properties accordingly.
• As shown in the video, add some more reasonable blog-like content to left, main, and right. Center what’s in left. Box what’s in right. Add fake posts in main.
• When the page shrinks below a certain size, we want the layout to be entirely vertical. We can do this with just one property tweak. Switch the flex-direction from row to column using a media query.
• Ensure that the layout is still aesthetically pleasing even when the media query kicks in. The contents of left should be centered cleanly. The boxes in right should expand to fill the page.

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab22 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.