Search within TutorialsPark

CSS3 Flex Box


Use CSS3 flex Box properties to create flexible layouts.


CSS3 Flex Box

1. The CSS3 flexbox layouts properties enable you to create fluidic layouts to that responsive to browser resizing.

2. A flexbox properties allow the elements to occupy the unused spaces within the container element, when the viewport is expanded or shrinked.


CSS3 flexbox Concepts, terminology,

1. The following are the terms and concepts of a flex-box layout

flex-box CSS3

Main Axis : The primary Axis on which the flex items are laid out .

Main-start : The Edge of the flex container where the main axis starts.

Main-end : The Edge of the flex container where the main axis ends.

Main size : It is the size of the flex when measure along the main axis. For a row, it the item's width.For a Column, its the item's height

Cross axis : It the axis which is perpendicular to the Main Axis of the flex.

Cross-start : Side of the container where the cross axis begins.

Cross-end : Side where the cross axis ends.

Cross-size : Similar to Main size, but measured along the cross axis .


Create a Flex Box Container

1.The first step towards creating a flex box is to create a flex container, the child elements within this container automatically turn flex.

2. To effect this, you need to use the display property. It has two values to create a flex.

flex : To create a box level flex container

inline-flex : To create a inline flex container

Example: CSS3 Flex box Container using display property

Give it a TRY! » Note: Floats have no effect on elements within the flex container


Control the flow within in Flex Container: flex-direction

FLEX BOX 1

FLEX BOX 2

FLEX BOX 3

FLEX BOX 4


flex-direction:

1. CSS3 flexbox property flex-direction is used to set the direction of the main axis.

2. The flex items can be laid out in a rows or coloumns, the order can be both forward and reverse.The values possible are as follows

row : Its the main axis, the direction is same as that of the current language

row-reverse : The direction of main axis is reverse of the row.

column : Runs the main axis in the same direction as blocks are laid out.

column-reverse : The direction of main axis is reverse of column

Example: Setting the direction using flex-direction

Give it a TRY! »


Controlling the Rows and Columns using flex-wrap property.

1. The flexbox property flex-wrap is used to control whether multiple rows or columns are allowed within a contain.The values possible are as follows

nowrap : To create a single row or column. Its the default.

wrap : To allow multiple rows or columns

wrap-reverse : The direction of cross axis is reverse from that of wrap.

Example: Flexbox property flex-wrap

Give it a TRY! »


CSS3 Flex Box: flex-flow property

1.The flexbox property flex-flow is a shorthand for both flex-direction, flex-wrap.

The value is of form flex-flow: <flex-direction> <flex-wrap> ;

Examples: flexbox property flex-flow

Give it a TRY! »


Setting the Order of Flex Items

FLEX BOX 1

FLEX BOX 2

FLEX BOX 3

FLEX BOX 4

order(for box 2):

1. You can set the order of the flex item within the flex-container using the order property. Values must be an Integer (positive and negative), the default value of all elements is 0.

2. Elements with same value are displayed in the order in which they appear in the HTML markup. Elements with the least value is displayed first.Hence, negative values are used.

Examples: Setting the Order within the flex Container

Give it a TRY! » Note: The order of all the flex items are 0 by default.


Setting the dimensions of the Flex Items

Table: Flexibility of Flex Items

Property Description Value
flex-grow Specifies who much the item will grow relative to other items, when free space is available <number> (default 0)
flex-shrink Specifies how much an item will shrink relative to other, when space is not available <number> (default 0)
flex-basis Sets the Initial Main Size of the flex item <length> (auto)
flex Shorthand to set all flex-grow , flex-shrink and flex-basisproperties in a single declaration. Its recommended instead of individual properties. <flex-grow>, <flex-shrink>, <flex-basis>

FLEX ITEM 1

FLEX ITEM 2

FLEX ITEM 3

FLEX ITEM 4

flex:

Example: Setting Dimension using flex property

Give it a TRY! »


Alignment of Flex Elements

BOX ITEM 1

BOX ITEM 2

BOX ITEM 3

justify-content:

1. The flexbox property justify-content is used to align elements along the main axis of the flex container. The values are as follows

flex-start : All the columns appear to have the same amount of content. This is the default.

flex-end : Flex Items are laid towards the start of the main axis

flex-end : Flex items are laid towards the end of the main axis.

center : Flex Items are laid in the center of the container

space-between : Flex items are evenly laid out on the Main axis, with first and last item against the edge.

space-around : Flex items are evenly laid out on the Main axis, with half-size spaces at each end of the axis.

Example: Flex Alignment with justify-content property

Give it a TRY! »


Alignment of Flex Elements using align-content property

FLEX BOX 1

FLEX BOX 2

FLEX BOX 3

FLEX BOX 4

FLEX BOX 5

FLEX BOX 6

align-content:

1. The flexbox property align-content is used to align elements along the cross axis of the flex container. The values are same as justify-content. An additional value is

stretch : The available free space is split evenly between the rows and columns increasing their sizes along the cross axis. Its the default value as well.

Example: Flex Alignment along Cross Axis with align-content property

Give it a TRY! »


Alignment of Flex Elements using align-items

FLEX BOX 1

FLEX BOX 2

FLEX BOX 3

FLEX BOX 4

FLEX BOX 5

FLEX BOX 6

align-items:

1. The flexbox property align-items is used to align elements in the current row or column of a flex container, its applied to the container

2. Similar to it is the self-align property which is applicable to individual flex items, but overrides align-items.

The Possible Values are :

flex-start : Item's cross-start edge is flush with the container's cross start edge.

flex-end : Item's cross-end edge is flush with the container's cross start edge

center : The Item is centered on the cross-axis.If two large, if it overflows equally in both direction

baseline : The text-baseline of each item is aligned with the baseline of item with the largest font size

stretch : Items are stretched to fit the current row or column.Its the default

auto : It inherits the property of parent element.Default for align-self .

Example: Flex Alignment with align-items and align-self property

Give it a TRY! »