Mastering CSS Flexbox
To create attractive, highly functional websites, cascading style sheets (CSS) have long been the standard language for defining elements on a web page. But as powerful as CSS has become over the years, it’s still difficult to use for creating certain types of layouts, and it can be somewhat limiting when it comes to designing for the range of devices your viewers use to visit your web pages. Mozilla’s Flexbox is designed to help make some of your trickier layouts infinitely easier to create and more flexible across a broad spectrum of browsers and display devices.
This learning path, designed for beginner- to intermediate-level web designers and developers, will introduce you to this latest and hottest development in CSS. You’ll learn about Flexbox fundamentals, including the flex model and some basic terminology. You’ll also see how, with just a few lines of code, you can create almost any responsive feature your site requires: widgets, carousels, you name it! Whether you’re a designer who is relatively new to the CSS space, or a seasoned CSS developer, this learning path will guide you through the Flexbox learning curve and set you on a path toward easier web page layout and design.
What you’ll learn—and how you can apply it
- Foundational concepts of flexible boxes in CSS
- Solve layout challenges for applications that grow, shrink, or change orientation on different viewports
- Specify the direction material flows, how content wraps, and ways that components expand to fill a space, without altering the underlying markup
- Explore CSS properties that apply to the flex container, and those that affect the layout of individual flex items
- Work with examples for a responsive two-column layout, a power grid home page, sticky footer, and calendar
This learning path is for you because…
- You’re a designer with introductory or intermediate-level CSS skills who is interested in mastering flexible boxes
- You’re a developer looking to understand and master Flexbox
- You’ve heard about Flexbox, and want to understand what it is and how it fits in to responsive design
- You should be comfortable with introductory level CSS content
- You should be familiar with Responsive Design
Materials or downloads needed in advance: