I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)


Mehul Mohan

Learn the flexbox layout system in CSS3 which helps to create complex layouts smoothly

Use display: flex to Position Two Boxes

Add Flex Superpowers to the Tweet Embed

Use the flex-direction Property to Make a Row

Apply the flex-direction Property to Create Rows in the Tweet Embed

Use the flex-direction Property to Make a Column

Apply the flex-direction Property to Create a Column in the Tweet Embed

Align Elements Using the justify-content Property

Use the justify-content Property in the Tweet Embed

Align Elements Using the align-items Property

Use the align-items Property in the Tweet Embed

Use the flex-wrap Property to Wrap a Row or Column

Use the flex-shrink Property to Shrink Items

Use the flex-grow Property to Expand Items

Use the flex-basis Property to Set the Initial Size of an Item

Use the flex Shorthand Property

Use the order Property to Rearrange Items

Use the align-self Property

A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.

CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.

Learn CSS3 Flexbox Layout System

Learn CSS3 Flexbox Layout System

Goals

Description

Plan Zero

Plan 1337