css flexbox tutorial

Do you want to learn CSS Flexbox Concept? !!Yes!!  Great !!! I appreciate you 🙂 In this post I’m going to explain a CSS Flexbox Tutorial, which will give you better understanding of everything about Flexbox.

 

What you going to learn in this CSS Flexbox tutorial

  • CSS Flexbox Introduction
  • Flexbox Browser Support
  • Flex-Container Properties and its attributes
  • Flex-Items Properties and its attributes

 

CSS Flexbox Introduction

Flexbox is a CSS3 new module (Not a CSS Attribute Only) which provides an accomplished way of flex-items alignment within flex-container. It sets order, alignment, and direction of items and distributes space between flex items (Child Elements) more efficiently within flex container (Parent Element) even for unknown and dynamic item sizes.

 

flex container

 

flex item

 

The best thing about Flexbox Layout is, it allows parent container to adjust width and height of its child items to fill the available space in the best possible way for various kind of device screen sizes. Parent container expands and shrinks child items to stop the overflow.

 

Important Note: Using Flexbox for small layouts and components is more convenient whereas grid layout is more appropriate for large-scale components and layouts.

 

Flexbox layout is both block and inline based. In other words, you can say it is direction-agnostic. If flex items are laid out in a row, is inline and horizontal-based whereas vertically laid out flex items are block and vertical based. You can change it by setting its property anytime. Have a look at below image which will give you a better understanding.

 

flex row

 

flex column

 

Most important, flexbox is not a single property, it is a complete module itself which consist a set of property. Some of its properties are used for flex container (Parent Container) whereas some are used for flex item (Child Container).

 

How Does Flex Items Laid Out in Flex Container

Flex items laid out on axes inside flex container. Below image gives a better idea how flex items are laid out on axes.

 

flex chart

 

Mainly flexbox items laid out on axes in following two ways

 

1). Main Axis (From Main Start to Main End)

Main Axis is the default/primary axis of flex container on which flex items does lay out unless you don’t set the property flex-direction.

. Flex items laid out on the main axis by default starts from main-start and goes up to main-end.

 

2). Cross Axis (From Cross Start to Cross End)

A perpendicular axis to the main axis is known as a cross axis. Cross axis direction depends on main axis direction.

. If you set property flex-direction: vertical; flex items goes from cross-start to cross-end.

 

Flexbox Browser Support

There are three different versions of flexbox syntax which support different versions of browsers and they are new, in-between, and old. Flexbox new syntax supports new browsers, in between syntax support middle versions of browser whereas new syntax support the newest version of browsers.

 

Well, It was the basic introduction to flexbox (flex container and flex items).  But, there is a lot to learn to become an expert in CSS Flexbox.

 

Let’s continue this CSS Flexbox tutorial and discuss the attributes of flex container and flex items and their usage.

 

Flex Container’s Properties and Their Attributes

 

1) flex-direction:

This flexbox layout property defines flex items direction inside flex container. It sets flex direction along main as well as cross axis depends upon value.

 

flex-direction Values and their Meanings:

flex-direction: row | row-reverse | column | column-reverse 

 

row:

This is the default value which laid out flex items from left to right (horizontally).

flex direction row

 

row-reverse:

This flex-direction value sets flex items direction from right to left.

flex direction row reverse

 

column:

It is similar to row but vertically. This value laid out flex items from top to bottom.

 

flex direction column

 

column-reverse:

Similar to the column but in opposite direction (bottom to top).

flex direction column reverse

 

 

2) justify-content

This property defines the alignment of flex items along the main axis of the container. In other words, you can say this property align flex items horizontally.

 

It also distributes extra free spaces leftover in the case of flex items of the container are flexible or are inflexible on a line but have reached their maximum size. In the case of overflow the line, It provides control over the alignment of items too.

 

justify-content Values and their Meanings:

flex-direction: flex-start | flex-end | center | space-between | space-around

 

flex-start

By default, flex items are placed at the start of the container.

justify content flex start

 

flex-end

Flex items are placed at the end of the container.

justify content flex end

 

center

Flex items are placed at the center of the container.

justify content center

 

space-between

Flex items are placed with equal space between them. The first item will be on the start line and the last item will be on end line.

justify content space between

 

space-around

Flex items are placed with equal space around them.

justify content space arround

 

 

3) align-items

This is alike justify-content property. It does the alignment of flex items on the cross-axis instead of the main axis.

 

align-items Values and their Meanings:

align-items: flex-start | flex-end | center | baseline | stretch

 

 

flex-start:

Flex items are placed at the top of flex container.

align items flex start

 

 flex-end:

Flex items are placed at the bottom of flex container.

align items flex end

 

center:

Flex items are placed at the vertically centered of flex container.

align items center

 

baseline:

Flex items are placed at the baseline of flex container.

align items baseline

 

stretch:

This is the default value. Flex Items are stretched to fit the flex container.

flex items stretch

 

 

4). flex-wrap

By default, flex container tries to fit all items on one line. You are always allowed to change it by setting properties.

 

flex-wrap Values and their Meanings

flex-wrap: nowrap | wrap | wrap-reverse

 

nowrap

This is default value allows items to fit on one line.

flex wrap nowrap

 

wrap

This value wraps flex items from top to bottom onto multiple lines.

flex wrap wrap

 

wrap-reverse

This value wrap-reverse flex items from bottom to top onto multiple lines.

flex wrap wrap reverse

 

 

5) flex-flow: <'flex-direction'> <'flex-wrap'>

flex-flowproperty sets flex-direction as well as flex-wrap property together, which narrate both main and cross axis of the container.

The default value of flex-flow is row nowrap which is a combination of default of flex-direction and flex-wrap.

i.e. flex-flow: row nowrap;

 

6) align-content

This is very similar to align-items, but it aligns flex-lines instead of aligning flex items.

 

In other words, you can say, it works only when flex items do not fit in one line (main axis)and extra space is available.

 

There is no effect of this property in case of having only one line.

 

align-content Values And Their Meanings

align-content: flex-start | flex-end | center | space-between | space-around | stretch

 

flex-start

Lines are packed at the cross-start of the container.

align content flex start

 

flex-end

Lines are packed at the cross-end of the container.

align content flex end

 

center

Lines are packed at the center of the container.

align content center

 

space-between

Lines are placed with equal space between them. The first line will be at the start of the container whereas the last line will be at the end of the container.

align content space between

 

space-around

Lines are placed with equal space around them.

align content space around

stretch

This is initial(default) value. Line stretch to take up the remaining spaces.

align content stretch

 

Ok, It was all about Flex container properties and their attributes. Let’s continue this CSS Flexbox Tutorial and discuss Flex Items and their properties.

 

Let’s get started!

 

 

flex-items properties

 

1) order: integer

By default, flex items are displayed in the source order. The order property provides some control over the order of flex items in which they appear inside flex container by assigning valueorder:integer. Flex items order could be negative also.

 

flex item default order

 

flex item order 1

 

flex item order

 

 

2) align-self:

This property overrides the default alignment for individual flex items. This is similar to justify-content.

 

align-self Values And Their Meanings:

align-self: auto | flex-start | flex-end | center | baseline | stretch

 

 auto:

Items are aligned based on its default values. If the value is not set, it will consider the value of the align-item property of the container.

align self auto

 

flex-start:

Flex items are placed at the top of flex container.

align self flex start

 

flex-end:

Flex items are placed at the bottom of flex container.

align self flex end

 

center:

Flex items are placed at the vertically centered of flex container.

align self center

 

baseline:

Flex items are placed at the baseline of flex container.

align self baseline

 

stretch

align self stretch

 

3) flex-grow: number

The flex-grow property allows flex items to grow. By setting its value number, you can decide how much a flex item should grow relative to other items within the container. The default value is zero and negative values are not allowed.

flex grow default

 

Example:

If you set all flex items with property flex-grow:1 inside the flex container, remaining space will be distributed equally to flex items. If you set to value 2 to one of its children, it will take twice space relative to rest flex items.

flex grow

 

flex grow

 

 

4) flex-shrink:number

flex-shrink property allows flex items to shrink. By setting its value <number>, you can decide how much a flex item should be shrink relative to other items within the container. The default value is one and negative values are not allowed.

 

5) flex

This is a shorthand property. We use this property combined to set the flex-grow, flex-shrink and flex-basis properties.

The default value is 0, 1, auto whereas flex-grow and flex-shrink are optional.

This shorthand is recommended property instead of setting individual properties. The shorthand property sets the value easily.

 

Display:

This property allows us to create flex container. We do so by setting its value flex or inline-flex

display: flex; allow us to create block-level flex-container, whereas display: inline; creates inline-level flex container.

 

Conclusion

I recommend you to use Flexbox layout for small components. The grid layout is all time appropriate for large layouts. I hope this CSS Flexbox Tutorial will help you a lot. Do join us on Facebook and Twitter for latest updates.