Review - Flexbox Courses on Skillshare
CSS: Flexbox Fundamentals
Ismail Raji, Software Engineer, Web Developer and Instructor
Duration: 11 minutes
In this 11 minute course, Ismall Raji discusses the Flexbox propertis. Of course, this is not an in depth course but a quick summary and demonstration of the properties. Ismall uses a split view html editor to demonstrate each Flexbox property and their values. He then discusses how to use Flexbox without any media queries for responsive web design. Finally, he sends his viewers to Flexbox Froggy, a Flexbox online game.
CSS Flexbox: The Complete Class
Peter Sommerhoff, Learn coding without the fluff!
Duration: 2 hours
In this two-hour long Skillshare course, Peter Sommerhoff walks you through the basic Flexbox properties, the new and improved CSS3 for controlling the layout of your webpages and website.
Peter begins with an introduction of just what Flexbox is, how it can make your CSS coding much easier and the current browser support. Peter supplies one download zip containing one HTML, one JPG and two CSS files. He discusses the purpose of each. He then begins with a simple example of adding and styling a container box with four divs inside.
Using this example, Peter discusses the main properties for the Flex container, including flex-direction and justify-content and how they work better than the old CSS properties. He finishes with the suggestion of an online game, Flexbox Froggy, which will give you some practice using these properties. He refers back to this game several times throughout the course.
Moving on to other properties, Peter discusses the flex align-items, flex-wrap and flex-flow properties, which control the placement of each div in the container. He demonstrates each value option, showing the flexibility of Flexbox. Next, we learn how to control the behavior of rows inside the container, using the flex item properties - order, align-self and stretch.
Before discussing the three project examples, Peter discusses the three most important properties for responsive websites, which are the flex-grow, flex-shrink and flex-basis properties. The flex-grow and flex-shrink properties tell the divs in the container to grow/shrink to fill the container. But he also discusses how to control the grow/shrink amount for each individual div.
Once you've covered all the properties, you are ready to take a look at some examples. Peter begins with a simple gallery example and moves on to a more flexible gallery solution. He also discusses the vertical centering of content inside the divs and adding media objects. Finally, he covers the Holy Grail of layouts, which is a header at the top, content area between two sidebars in the center and a footer. He demonstrates how easy this layout is to markup with Flexbox.
Disclosure: As a participant in the Skillshare affiliate program, some of the links in this article are affiliate links. However, my opinions are completely my own based on my experience.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.