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:
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:
tiles.htmland CSS in
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.
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.
gallery, we want it to be a flex-container. Set its
flex-directionaccordingly. Once a column is full, we want to wrap the images over into the next column. Set
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.
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.
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:
blog.htmland CSS in
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.
body, so make
bodya flex-container. Have it layout its flex-items in a column.
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.
middleto distribute its child elements in Flexbox-ish way, so it too must be a flex-container. Set its
mainshould expand. Set the
right. Center what’s in
left. Box what’s in
right. Add fake posts in
columnusing a media query.
leftshould be centered cleanly. The boxes in
rightshould expand to fill the page.
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.