Flexbox is another newer layout model that includes many options for aligning elements and creating flexible page layout components. In this video you go over the basics to getting started with flexbox.
- [Narrator] The flexible box layout, or flexbox for short,…includes many options for aligning elements…and creating flexible items.…This layout model is supported by all major modern browsers.…Internet Explorer 11 has partial support…and there is no support in any previous version.…So as long as you don't have to support older versions…of Internet Explorer, you're good to go with flexbox.…Let's take a look at an example.…To use flexbox, the first thing you need to do…is set the display value to flex…to initiate the flex layout.…
So let's go ahead and uncomment out line three…and run the code.…This will align the elements…and automatically size the flex items…based on the content contained within.…You can still set a specific width to the flex items…if you want them to be equally sized.…So here in my flex item CSS block,…I'll add my width in of 20%.…So now they are equally sized.…Notice that the border around each item…extends the same width and height for each item.…
When using traditional techniques like float,…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- 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.