MENU

Loaders.css

How to Create a Daffodil Text Effect for Spring...

May 4, 2015 Comments (0) Views: 2919 Coding, Tutorials

A Visual Guide to CSS3 Flexbox Properties

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based.

Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.

Check out this Pen!

View Tutorial

Tags: #, #, #, #, #, #, #, #, #, #, #, #

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.