CS 318: Lab 22 – Flexbox
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
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
prototype2and have made progress since
See you next time!
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.
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.htmland CSS in
- Set all elements’
- Create a
- Nest inside
diva bunch of
imgelements. Instead of downloading enough images to fill the screen, use Lorem Picsum. Read the directions on the site and set the
srcattributes of your
imgelements 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.
galleryfill the browser window using
fixedpositioning. Each edge of
galleryshould match up to the corresponding edge of the browser.
galleryhas more content than fits in the browser window, the content gets cut off. Set
overflowso 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
- We want the images to fill in columns. Set the
flex-directionaccordingly. Once a column is full, we want to wrap the images over into the next column. Set
- 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-growproperty on the images to some non-zero value. (Usually we set this with the shorthand
flexproperty.) 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-fitproperty 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.
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.htmland CSS in
- Set all elements’
- Create a
headerfor the top, a
middlefor 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
bodya 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
100vh. When you have little content, this will keep the footer from awkwardly rising up from the bottom of the page.
middlebe the only element that expands to fill the extra space of the flex-container. Set
flex-growto 1, while the header and footer remain at the default of 0.
middle, add a
main, and a
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
middleto distribute its child elements in Flexbox-ish way, so it too must be a flex-container. Set its
mainshould expand. Set the
- As shown in the video, add some more reasonable blog-like content to
right. Center what’s in
left. Box what’s in
right. Add fake posts in
- 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
columnusing a media query.
- Ensure that the layout is still aesthetically pleasing even when the media query kicks in. The contents of
leftshould be centered cleanly. The boxes in
rightshould 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.