Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Getting started with CSS Flexbox

Wednesday, March 16th, 2016 by Servage

css-flexboxCentering content vertically and horizontally has been a troublesome subject for web developers in the past. Fortunately a new feature called Flexbox has been introduced in CSS3 to simplify the process of centering content. Flexbox allows developers to quickly and easily center content, usually divs or lists, vertically and horizontally with only a few lines of CSS. This article will walk through the most common properties of Flexbox and how to use them.

Aligning to the center

To start using Flexbox, an element must have its display property set to flex (“display: flex;”). This allows you to apply other Flexbox properties to the element. Flexbox is commonly used to align content horizontally. This can be done with a single CSS property “justify-content”. It accepts multiple values, including center, flex-start and flex-end. As you might have guessed, “justify-content: center;” aligns the contents of an element to the middle. This is all you need to center your content!

Left and right alignment

The next properties, flex-start and flex-end, align content to the left or right of a container. Flex-start is the default, which aligns all content to the left side of an element. Flex-end is the opposite and aligns all content to the right side, or to the end of the element.

Vertical alignment

However, flex-start and flex-end are not restricted to centering content only horizontally. They can also be used to center content vertically. To do this, you have to use the flex-direction property to change the direction of the Flexbox. The most common properties for flex-direction include row (flex-direction: row), which is the default, and column (flex-direction: column), which is the opposite. In other words, flex-direction: column makes the content to be displayed from top to bottom by default. To align content to the center, you can use the same “justify-content: center;” property. When the direction of the flow is set to column, then “justify-content: flex-end;” moves content to the bottom of the element.

Two alignments at the same time

So far you have found out how easy it is to center content both vertically and horizontally. We have achieved both of these using the same justify-content property and by setting the flow direction using flex-direction. However, this does not allow us to center content in both directions at the same time. Fortunately, a new property called align-items comes to the rescue. To keep things simple, it can be considered the same property as justify-content but on the opposite axis. It supports most of the same values as justify-content, such as flex-start, flex-end and center. As an example, to align the child element of a div to the center of the page, use display: flex, justify-content: center, and align-items: center, at the same time.

By now you should be ready to try Flexbox on your own. Keep in mind that there are many more Flexbox properties for you to explore. Always remember to apply “display: flex;” to the element. Otherwise the Flexbox properties will not have any effect.

Getting started with CSS Flexbox, 2.7 out of 5 based on 7 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.