Join James Williamson for an in-depth discussion in this video Challenge: Creating element flexibility, part of CSS: Flexbox First Look.
In our last chapter we took a brief tour of the generic blog that we're going to be…working on in our challenges. Now it's time to dig in and get started.…In this challenge, you're going to be focusing on using the Flex property to…control the sizing of some of our page elements.…Now I actually have two files open that we're going to be working with, the…index.html and the flexbox.css files. You can find these in the 02_04 folder,…and the flexbox.css is going to be found in the _css folder.…
Alright I want to start with the index just because I want to give you sort of…the lay of the land if you will, the structure of the page itself.…So inside of our body tag we open with a nav with the role of navigation, that's…followed by a header with the role of banner and that is followed by a section…with a class of main. Now inside the main section that wraps two…elements, the article with class of featured, and just below that we have an…aside with a class of sidebar. Inside the sidebar we have several…sections, and finally the aside and main selection closes out.…
- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers
Skill Level Beginner
1. Flexbox Basics
2. Element Flexibility
Defining display ratios3m 14s
3. Controlling Alignment
4. Element Display Order
Additional resources3m 59s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.