- [Instructor] We've talked about floats already…and for many years, floats were really the only style option…available for laying out web pages.…Well, that is if you don't consider hacking tables…as a layout option.…Well, with CSS3 came Flexbox, officially dubbed the…Flexible Box Layout module.…And this allows us a tremendous amount of control…of elements relative to their parents.…It's a one dimensional layout model that lets…us arrange elements on the page in a way that ensures…those elements will behave predictably on a different…screen size or on different devices.…
It's a big improvement over the block model…that floats use.…So, the Flex layout is based on Flex flow directions.…Basically, items will be laid out following either…the main axis which originates at main start and…terminates at main end or the cross axis from…cross start to cross end.…Using Flexbox goes a little something like this.…First, you're going to define a parent element as…the flex container.…And this in turn, defines any direct child elements…
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS
Skill Level Beginner
1. CSS Basics
2. CSS Specifications
3. Common CSS Concepts
4. CSS Layouts
5. Working with CSS
6. Responsive CSS
7. Going Further with CSS
- 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.