Responsive Webdesign via Flexbox
The flexible box module, otherwise known as flexbox, is a layout model and a powerful method for designing a flexible responsive layout structure, without having to use float or positioning. The main idea is to give the container the ability to alter its items’ width/height and order to best fill the available space to accommodate all kind of display devices and screen sizes.
The Flexbox layout used today is very different than what was first proposed, the CSS Working Group had proposed the idea of a Flex layout in 2008 publishing the first working draft in 2009. The specification rewritten by Tom Atkins Jr (referred to as the author of flexbox) in 2011 is very different than the previous draft, His main goal was to try and remove the dependencies on all crazy float/table/inline-block/etc hacks that he had to master as a web developer (Something that a lot of front-end developers had come accustomed to) with better browser support.
What flex container does is, it expands or shrinks its elements to fill available free space and prevent overflow. Most importantly, the flexbox is direction oriented 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 the flexibility to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
A Flexbox layout consists of a flex container(parent element) that holds flex items(child element). The flex container can be laid out horizontally or vertically.
Parent Element (Container)
The flex container becomes flexible by setting the display property to flex.
The flex container properties are:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
flex-direction:
The flex-direction property defines the direction in which the container wants to stack the flex items. The column value stacks the flex items vertically (from top to bottom) whereas the column-reverse value stacks the flex items vertically (but from bottom to top). Similarly, the row value stacks the flex items horizontally (from left to right) and the row-reverse value stacks the flex items horizontally (but from right to left).
flex-wrap:
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
nowrap (default): all flex items will be on one line.
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
flex-flow:
This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. The default value is row-nowrap.
justify-content:
The justify-content property is used to align the flex items
flex-start (default): items are packed toward the start line
flex-end: items are packed toward the end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them.
align-items:
The align-items property is used to align the flex items vertically. It defines the behavior for how flex items are laid out along the cross axis.
stretch (default): stretch to fill the container (still respect min-width/max-width)
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
Child Element (Items)
The direct child elements of a flex container automatically become flexible (flex) items.
The flex container properties are:
- order
- flex-grow
- flex-shrink
- flex-basis
- align-self
order:
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
flex-grow:
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
This property specifies how much a flex item will grow relative to the rest of the flex items.
flex-shrink:
this property specifies how much a flex item will shrink relative to the rest of the flex items.
flex-basis:
This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword (auto, main-size, max-content, min-content, and fit-content.)
align-self:
The align-self property specifies the alignment for the selected item inside the flexible container. It overrides the default alignment set by the container’s align-items property.
In conclusion, flexbox is a layout mode added in CSS to replace float and table layouts. It comes with a set of defaults that make it easier to create complex layouts with relatively little code. It is stable, easy, and well-supported.
