A beginner’s take on crafting responsive design elements with flexible boxes

CSS Flexbox is a concept that has been covered with a fair amount of vigor in the past. While the idea first came about in 2009, it is more prominent now and is a widely known option for using in responsive designs.

For someone new to the concept, like me, there are so many guides and tutorials on the subject. To help ease fellow front-end development amateurs/enthusiasts into the subject, this post is a basic introduction to the concept and also a collection of helpful resources on how and when to use flexbox in your web design.

What Is CSS Flexbox?

According to W3C documentation:

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

What this essentially means is that elements deemed to be ‘flexible’ will resize and position themselves optimally when the display area is stretched or shrunk. This automatic resizing and relocation is a great way to develop modern responsive design. While flexbox is not meant to layout entire page designs, it is very useful when positioning specific elements — whether individually or in groups.

Basic components and terminologies

The first thing to know is that there are two basic components in flexbox. One is the flex container and the other is flex-item. Flex-container is the element on a page that contains flex-items. This could be a div or a header section.

Flex-items are the direct child elements of a flex-container. For example, the links in the navigational section inside a header div would be flex-items in that flex-container.

source: http://ift.tt/1ZWpr4A

The image is a simple demonstration of what is a flex-container and what constitutes a flex-item.

To make an element a flex-container, set its display property to flex.

display: flex

If we don’t want the container element to behave like a block element, we can set display to inline-flex value.

display: inline-flex

Within the image above are two more essential terms for flexbox — main axis and cross axis. Every flexbox has two axes. These axes determine the direction along which elements will resize when display size changes. By default, the horizontal axis is the main axis (along the row) and the vertical axis is taken as the cross-axis (along the column).

Flex-direction

This property that can be used to customize the axis orientation inside a flex-container. There are four values that it can take:

1. row: The default value that positions elements from left to right inside the parent element starting from the top left corner.
2. column: Elements are positioned from top to bottom inside the parent element starting from the top left corner.
3. row-reverse: Elements are positioned from right to left inside the parent element starting from the top right corner.
4. column-reverse: Elements are positioned from the bottom to top inside the parent element starting from bottom left corner.

source: http://ift.tt/2mj1s07

Justify-content & align-items

One of the most useful feature when using flexbox is the ability to organize flex-items from left to right or top to bottom inside a flex-container.

To do this along the horizontal axis, use the justify-content property and for doing this along the vertical axis, use the align-items property.

Justify-content can be used to position elements from first element to last without any space at the beginning (flex-start), to position them in order from first to last without any space at the end (flex-end), to position them in the center without any space between them (center), to spread them out evenly without any space at each end (space-between), or to spread them out evenly but with space before and after the elements (space-around).

Similarly, align-items can be used to position elements along the vertical axis to position elements from top to bottom. Flex-start, flex-end and center behave in the same way along the vertical axis. The values that are different are:

• baseline — for aligning the bottom of the content with each other, and
• stretch — for stretching the element from top to bottom, if minimum or definite height is not set.

This post by Scott Domes gives a good visual demonstration of the concepts explained above:

Flex-grow and flex-shrink

The main selling point of flexible boxes is their ability to resize and re-position elements when the display area expands or shrinks.

To ensure flex-items expand automatically, in the proportion you want, use the flex-grow property.

#flex-item-1 {
  flex-grow: 1;
}

#flex-item-2 {
  flex-grow: 2;
}

While the default setting of flex-grow is zero, setting an integer value tells the ratio in which you want the flex-items to stretch out when extra space is available. As seen in the code above, flex-item-2 will grow to cover double the space that flex-item-1 occupies. This means that if 90 pixels of extra space is available, flex-item-2 will expand to cover 60 pixels of that space, while flex-item-1 will expand to only occupy 30 pixels of that space.

Flex-shrink is the corresponding property when you want flex-items to contract as and when the parent element gets too small to accommodate the original size of each child element. The default value for flex-shrink is 1, which is when not altered elements shrink in the same proportion.

#box-1 {
  flex-shrink: 2;
}

#box-2 {
  flex-shrink: 1;
}

According to the code above, box-1 will collapse twice as much as compared to box-2 when the display area shrinks so much that elements cannot be their original size. This means that if the parent element is 60 pixels too small for the children, then box-1 will shrink by 40 pixels, while box-2 will shrink by 20 pixels.

Scott Domes did another delightful demonstration of the concepts of flex-grow and flex-shrink in a continuation of the GIF series for Flex:

Notice how the third box grows more than its siblings because of greater flex-grow value.

This demonstrates how the third box does not shrink even when its siblings do, because of the flex-shrink value being zero.

Apart from these basic properties, there are other properties that help define the attributes for flex-containers and flex-items. Some of these are:

• flex-basis: This establishes the size of the an item before it stretches or shrinks. It takes a pixel value.
• flex-wrap: This moves the items to a new line when the display areas shrinks. Its value can be set to wrap, nowrap or wrap-reverse.
• align-content: In case there are multiple rows within flex-container, align-content allows us to set the spacing of the rows from top to bottom. Its value can be set to flex-start, flex-end, center, space-between, space-around, or stretch.
• align-self: It can be used to override the align-items value for a specific individual flex-item. It takes the same five values as align-items.

Using Flexbox in Practical Projects

Once you’re well-versed with these properties, the next question to consider is where can flexboxes help you in web design.

Brandon Morelli did a good practical example on how to design a minimalist HTML card with flexbox:

source: http://ift.tt/2tdtKkn

Similar applications could be when designing a site for news content, like this tutorial from Envato that helps create a website akin to The Guardian’s layout.

source: http://ift.tt/ODBHWS

There is also this article about five practical examples of flexbox application if you want to delve deeper:

When To Use or Not To Use?

That’s the main question.

Flexbox works best when tackling issues of alignment, scaling and ordering in your web design. This is why, theoretically, it would be of good use in the news website design case (like mentioned above), where multiple cards would be needed to show various stories. Each news card could be of a different size with varying alignment requirements for every column.

Navigational headers are also a good place for using flexboxes because of the need for reordering horizontally placed elements.

Rachel Andrew wrote a good post on choosing between Grids and Flexbox. As her article lays it out very well,

“ Flexbox is essentially for laying out items in a single dimension — in a row OR a column. Grid is for layout of items in two dimensions — rows AND columns.”

It is advised that Grids are better suited for whole page layouts rather than Flexbox.

Additional resources

For a comprehensive dive into Flexbox, you can read Chris Coyier’s guide to Flexbox on CSS Tricks.

This is list of helpful resources published by Carol Skelly for aiding in applying Flexbox to your projects:

And, if you get around to wondering how Flexbox and auto margins can be used together, Sam Provenza already figured out the solution:

I hope this article helps other front-end enthusiasts like me understand Flexbox better. What’s your take on Flexbox? Tell me in the comments below.

Creating a responsive web design? You need a responsive design collaboration tools like zipBoard to work with your team on, for web design and development. Whether a live website or a mock, zipBoard lets you annotate and track issues for all your web development projects.