Introduction to Flexbox Essentials
The concept behind Flexbox properties is to provide an ability to the container to automatically change the width, height, and order of its items to best fill up the space available. This can be really useful to accommodate items within different screen sizes and devices. Items are expanded to fill up any free space, or shrunk to avoid an overflow.
CSS Flexbox grid For Beginners
CSS is one of the first and easiest things to learn in web development and design, but don’t mistake its simplicity for lack of features. It has a number of amazing features and capabilities ready to be tapped into, one of them being its relatively new layout module: Flexbox properties.
Flexbox properties are one of the newer layouts available to CSS3, and there’s a lot to learn about it. Here, we get hands-on with the layout and how to use it. Before we begin, though, here’s a little background on Flexbox properties:
What are layout modes?
In the simplest terms, CSS Flexbox grid is a layout mode. CSS has a number of existing layout modes. The block layout mode (like display: block) has been around for a long while. Block layouts are a good choice to style full documents. In fact, a web browser treats several elements like divs and paragraphs as block level by default.
Another common layout mode is inline. The strong tag, input tag, and anchor tag are examples of inline-level elements. Google Chrome’s developer tools even let you view an element’s ‘computed style’ to determine the CSS properties and values that have been applied to the elements not explicitly set by the developer.
The relatively newer Flexbox properties (Flexible box) layout has been designed as a more efficient method of laying out, aligning and distributing space among container items, even if the size of these items is dynamic or unknown. Hence the term ‘flexible’.
The Flexbox Properties concept
The most important thing about Flexbox properties is that it is direction-agnostic. While the block layout is vertical-based and inline layout is horizontal-based, Flexbox is neither. Block and inline work well in the right situations, but lack the flexibility to support complicated or large applications, particularly when it comes to change orientation, stretching, shrinking, resizing and otherwise changing up the dimensions of the elements.
Where are Flexbox properties used?
Like any other CSS layout, Flexbox is best used in certain situations. In particular, it is appropriate for small-scale layouts and components of an application. For larger scale layouts, a Grid layout would be the wiser choice.
Why is Flexbox preferred?
A lot of developers and designers give preference to Flexbox properties whenever they can (sometimes too often!). This is because Flexbox properties are easier to use; the positioning of the elements is much simpler, so you can get more complex layouts with less coding. In other words, it makes the development process simpler.
A Guide to Flexbox Properties
Now that you know a little bit about Flexbox properties and how and why it works, here is a detailed guide into the layout. The layout’s model is made up of a parent container, also called a ‘flex container’. The immediate children from this container are called ‘flex items’.
The layout has gone through several iterations and syntax changes over the years since its first draft was created in 2009. The latest Flexbox specification is supported on the following web browsers:
- Opera 17+
- Internet Explorer 11+
- Mozilla Firefox 28+
- Google Chrome 29+
- Apple Safari 6.1+
- Android 4.4+
- iOS 7.1+
The Terminology used in Flexbox properties
Here is a look at some basic terminology used in the Flexbox properties layout:
- Display: This command is used to define the flex container. It could be inline or block, depending on the It also defines flex content for all the items within the container. Example:
.container {
display: flex; /* or inline-flex */
}
- Order: Flex items are laid out according to the source order by default, but the ‘order’ property can control the order in which the items appear within the container. Example:
.item {
order: <integer>;
}
- Flex-direction: This order sets up the main axis, defining the direction that flex items are placed within the container. Flex items can be primarily laid out in vertical or horizontal directions. Example:
.container {
flex-direction: row|row-reverse|column|column-reverse;
}
- Flex-grow: This order defines the flex item’s ability to automatically scale up if it has space. It can accept a unitless value to serve as a proportion. This value dictates how much space the item should take up within the flex container. For instance, if all items have flex-grow set as 1, the remaining space within the container will be equally distributed to all the children. If the value is 2, the remaining space will take up two times as much space as the rest. Example:
.item {
flex-grow: <number>; /* default 0 */
}
- Flex-shrink: This does the exact opposite as flex-grow, in that it shrinks the flex items when necessary. Example:
.item {
flex-shrink: <number>; /* default 1*/
}
- Flex-basis: This order defines an elements default size before the remainder of space is distributed. It could be a length, like 5rem or 20%, or a keyword. The ‘auto’ keyword indicates that the item’s width and height be measured, and the ‘content’ keyword indicates that the item is sized based on its content. Example:
.item {
flex-basis: <length> | auto; /* default auto */
}
- Flex: This is a combined shorthand for all of the above three properties: flex-grow, flex-basis, and flex-shrink. The default is ‘0 1 auto’.
.item {
flex: none | [ <‘flex-grow’> <flex-shrink’> || <‘flex-basis’> ]
}
- Justify-content: This order defines the main axis alignment and helps distribute the additional free space if there is any left when the items are inflexible or have reached their maximum size. This also helps control the alignment of the item when there is an overflow.
.container {
justify-content: flex-start| flex end | center | space-between | space-around;
}
- Align-items: This is used to define the default behavior of the layout of flex items on the cross axis of the current line. It is essentially a version of ‘justify-content’ on the cross-axis, which is perpendicular to the main axis. Example:
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- Align-content: This order aligns the lines of the container in case there is additional space on the cross-axis. It is similar to ‘justify-content’, but for the cross axis instead of the main axis. If there is just one line of flex items, this property does not have any effect. Example:
.container {
align-content: flex-start | flex-end | center | space-between | space-around| stretch;
}
Using Flexbox properties
In order to use the Flexbox layout, you can simply set the display property on the HTML parent element, like below:
.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}
If you prefer to display like an inline element, you could write in:
.flex-container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}
You only require this property to set on the parent flex container and its immediate flex items. The container children will automatically become flex items.
Flex Container properties
There are a lot of ways for grouping Flexbox properties, and the easiest way to learn about them is by splitting them into Flex container and item properties. We’ve just covered some of the flex container properties above. Let’s look at the rest:
-
Flex-direction: row or column
The flex-direction property can be laid out as columns vertically or rows horizontally. With row direction, the flex items are stacked left-to-right by default. Row-reverse changes this direction to right-to-left. The column direction is top-to-bottom by default, and the column-reverse function reverses this to a bottom-to-top direction.
-
Flex-wrap: nowrap or wrap
The flex-wrap property controls if the flex container’s children are laid out in multiple or single lines, and the direction in which the new lines are stacked. The nowrap value sees flex items displayed in a single row, shrunk to fit the width of the container by default. The wrap value sees flex items displayed in different rows in a left-to-right or top-to-bottom direction. You could add wrap-reverse to change the order too. The default value is nowrap.
-
Flex-flow
This property is basically a shorthand to set the flex-direction and flex-wrap properties together. The default value is ‘row nowrap’. Example:
.flex-container {
flex-flow: <flex-direction> || <flex-wrap>
}
-
Justify-content
The justify-content property has four values: flex-start to align items to the left side of the container; flex-end to align items to the right side; center to align with the center; space-between to align items with equal spacing between them, with the first and last items aligned to the container edges; and space-around for aligning the flex item with equal spacing around them, including the first and last items. Flex-start is the default value.
-
Align-items
This property has five values: stretch to scale up flex items to fill the whole width or height from cross start to cross end of the container; flex-start to stack items at the cross start; flex-end to stack items at the cross end; center to align items to the center of the cross axis; and baseline to align items so that their baselines are aligned. Stretch is the default value.
-
Align-content
This property aligns the lines of a flex container when there is additional space in the cross axis. Its values are: stretch to distribute space after every row; flex-start to stack items towards the cross start; flex-end to stack items towards the cross-end; center to stack items at the center of the cross axis; space-around to equally distribute space around flex items. The default value is stretch.
Flex item properties
Now that you know about Flexbox container properties, let’s look at the item properties:
- Order
This property controls the order of appearance of the flex container’s children. They are ordered within the flex container by default.
.flex-item {
order: <integer>;
}
You can reorder flex items without having to restructure the HTML code. The default value is zero.
- Align-self
This property enables the default alignment of a specific flex item to be overridden. You can use the values from align-items for this property.
.flex-item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
The auto value in align-self is computed by the value of the align-items on the element parent. If the element has no parent, the stretch is used instead.
Basic Examples
That’s all you need to know for using the CSS Flexbox grid layout. Now it’s time to practice what you learned. Here are some examples that show you how all these properties come together. Let’s begin with something absolutely simple:
.parent {
display: flex;
height: 300px;
}
.child {
width: 100px;
height: 100px;
margin: auto;
}
This is an example of perfect centering. The height and width values can be changed as you wish. The key here is to set the margin to ‘auto’ so that the flex container automatically absorbs any extra space. Simple enough!
Now, let’s move on to adding some more properties: a list with six items of fixed dimensions that can be auto-sizable. They have to be evenly distributed to the horizontal axis.
.flex-container {
display: flex;
justify-content: space-around;
}
Next, let’s try to center a right-aligned navigation for medium-sized screens, and to make it single-columned on small devices.
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
flex-direction: column;
}
}
Time to take this one step further! Let’s try a mobile-first layout with three columns, with a full-width footer and header and independent from source order.
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}
/* We rely on source order for mobile-first approach*/
/* Medium screens */
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
Conclusion
These are just some basic examples. You can play around a lot more with CSS Flexbox grid layouts, and they are absolutely invaluable if you want to make a responsive webpage.
Recommended Articles
This has been a guide to Flexbox Essentials For Beginners. Here we discuss the basic concepts, covered some of the flex container properties along with a basic example. You can also go through our other suggested articles to learn more –
