Flexible design layout with Flexbox

Image for post
Image for post
CSS3 : Flexbox

today's world the design industry have grown a lot better and we developers are loving the modern design approach you designers come up with. But the difficult situation comes when we developers feel a hard way to layout the design you designers make. For solution to this in 2009 a new display style named flex appeared on the map. Since then flex has undergone a few changes to reach its current iteration. The flex value is an alternative to block elements floated and manipulated using media queries. Instead, developers can build a flexible container, flexbox for short.

Its great for mobile screens and responsive content for dynamic layouts and webapps.

This 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.

What is the Flexible Box?

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

The cool thing is that even though flexbox isn’t yet officially a part of CSS3, all major browsers support it including Android and iOS.

According to Chris Coyier:

“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…”

When to Use Flexbox for our Layout?

First, lets make ourselves clear on this :: flexbox is technically capable of creating a full layout for your theme, it’s not designed exclusively for this purpose. Rather, it’s better suited for styling separate containers such as your main content area, sidebar, header and other similar sections.

Grids (CSS Grid) are ideally used for creating an entire layout.

Always design a thing by considering it in its next larger context — a chair in a room, a room in a house, a house in an environment, an environment in a city plan. — Eliel Saarinen

As developer advocate for Chrome Jake Archibald notes in his article Don’t Use Flexbox for Overall Page Layout, what an end user sees is a sudden jump of the layout from content appearing as full-width to the actual size, which may be a lot smaller. While this is only a concern for users with slower internet connections, it still poses a problem for user experience. With this in mind, you don’t need to choose between the two — use grids for layouts and flexbox for content within that layout.

Basic Flexible Box Terminology

Image for post
Image for post

Flex container: The parent element in which flex items are contained. A flex container is defined using the flex orinline-flex values of the display property.Flex item

Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

Axes: Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.

  • The flex-direction property establishes the main axis.
  • The justify-content property defines how flex items are laid out along the main axis on the current line.
  • The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
  • The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.

Directions: The main start/main end and cross start/cross end sides of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).

  • The order property assigns elements to ordinal groups and determines which elements appear first.
  • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.

Lines: Flex items can be laid out on either a single line or on several lines according to the flex-wrapproperty, which controls the direction of the cross axis and the direction in which new lines are stacked.

Dimensions: The flex items’ agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

Image for post
Image for post
Input Elements managed by Flexbox

Flexbox Examples in CSS

The flexbox model has gone through a series of changes with revisions and simplifications of code standards. Be aware that some tutorials and live demos may use outdated syntax and require some updates before use on another project.

Take a look at the CodePen snippet made by Chris Coyier. It’s a bare-bones basic layout with a fixed center container bookended by two fluid containers. The fluid containers only need a single line to define their behavior: flex: 1.

The main content box is flexible while other columns are fixed. Resizable elements remain fluid until the sidebar column eventually breaks down.

Everything in that sample layout is built using flexbox. There are no floats, there are no media queries. This square grid snippet illustrates the same point that responsive flexbox layouts do not require media queries.

But perhaps one of the coolest uses for flexbox is vertical & horizontal centering. Web designers have always used margin: 0 auto for horizontal centering with a fixed width. But flexbox allows both vertical and horizontal centering on a fluid-width container.

BROWSER SUPPORT

Browser support is, typically, a complex question. Made all the more complex for flexbox because flexbox has several different syntaxes. Early indecision, independent development by some browser suppliers, and an iterative process, has left us with several different versions of flexbox that all need to be catered to.

Happily, with the addition of some browser prefixes for legacy browsers, we can now rely on it. According to caniuse.com, of current mainstream browsers only IE9 will present a problem for us.

Fortunately, like all CSS, if flexbox fails, it fails silently. Meaning that IE9 will just ignore it.

Image for post
Image for post

Flexbox Playground

There are a few flexbox playgrounds available online for experimenting:

Further Reading Materials and Inspiration I took to write this article from:

(Note: The article contains inspiration and words mentioned in above links not meant to violate copyright issue)

Happy Coding !!

Written by

Product Designer and Frontend Developer | https://twitter.com/ishan02016

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store