A Complete Guide to Flexbox | CSS-Tricks

Notice: get_currentuserinfo is deprecated since version 4.5.0! Use wp_get_current_user() instead. in /hermes/bosnaweb04a/b2720/ipg.preventpimplefacecom/zocura/wp-includes/functions.php on line 3831

 by visualxl in Uncategorized Leave a Comment

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Source: A Complete Guide to Flexbox | CSS-Tricks

visualxlA Complete Guide to Flexbox | CSS-Tricks

Leave Your Comment