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.…
Author
Released
6/22/2013- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers
Skill Level Beginner
Duration
Views
Related Courses
-
CSS: Page Layouts
with James Williamson8h 57m Beginner -
CSS: Styling Forms
with Ray Villalobos4h 1m Beginner -
CSS: Transitions and Transforms
with Joseph Lowery2h 25m Intermediate -
CSS with LESS and Sass
with Joe Marini1h 57m Intermediate
-
Introduction
-
Welcome56s
-
Using the exercise files1m 47s
-
-
1. Flexbox Basics
-
Flexbox overview2m 39s
-
Current support3m 53s
-
Defining flex elements3m 15s
-
Understanding flex axes1m 37s
-
Controlling element flow3m 12s
-
Content wrapping3m 28s
-
Challenge overview2m 55s
-
-
2. Element Flexibility
-
Defining display ratios3m 14s
-
3. Controlling Alignment
-
Main axis alignment6m 14s
-
Cross-axis alignment6m 8s
-
Aligning single items4m 17s
-
Flex item margins9m 24s
-
Aligning multiple lines7m 13s
-
-
4. Element Display Order
-
Flex flow and display order5m 58s
-
Nesting flex containers4m 24s
-
Conclusion
-
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.
CancelTake 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.
Share this video
Embed this video
Video: Challenge: Creating element flexibility