Join James Williamson for an in-depth discussion in this video Defining display ratios, part of CSS: Flexbox First Look.
Before we move on, I want to dig a little deeper into the flex property and how to…approach using the values for layout. Now, personally, I like to think of…defining them for flex items the same way that you create display ratios.…In a, a manner, very similar to working with fluid grids.…So I have the ratios.htm file open from the 02_03 directory and if I just take a…look at this in my browser you can see we have three elements, one, two and three,…and they're not being sized any way at all right now.…
Well, actually they kind of are but they're just, they're default size.…So, if I look in the code I can see that I have three boxes and each of them have a…separate class, flex one, flex two and flex three.…Handily enough I have selectors already prepared for you with the flex property itself.…So we've already kind of got a head start here if you will.…Okay, now for those of you that have ever used say a grid layout system or a fluid…grid layout, it doesn't really matter. You know that in those systems you define…
- 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.