Join James Williamson for an in-depth discussion in this video Solution: Creating element flexibility, part of CSS: Flexbox First Look.
Let's take a look at the finished files from the previous challenge.…I'm going to go through the code and explain the styles that I wrote to control…element flexibility and you can compare your results with mine.…So, I have index.htm and the flexbox.css files open from the 02_04 finished files folder.…Okay, so lets talk about each of the steps individually and take a look at the…solution that I came up with. So the first step was to take a look at…the structure of the featured inside bar articles.…
Make them flex items. And then make it so that the featured…article is three times the size of the side bar element.…Alright so let's take a look at how I did that.…If I scroll down into my styles. I can go into the Layout Styles and I…want to start right here on bout line 56 or 57 right there for the main content styles.…So, one of things that a lot of people overlook is right here for section.main.…In order to use the flex property on the feature in the sidebar, they have to be…flex items. In order for them to be flex items they…
- 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.