Complete Guide to CSS Flex Box:

Complete Guide to CSS Flex Box:


Flex Box is a one-dimensional layout to lay down items in rows or columns. It helps to layout, position and align items inside a container.

It even makes things easy when dealing with responsive websites design. Flex box gives great freedom to control flex items inside a container.

Flex Box basically has two main component, Flex Container and Flex Items which both has its properties associated to each other. We will check each flex box property in this Complete Guide to CSS Flex Box

Flex Box typically looks as below which has Flex Container and Flex items :

Flex Container: Flex Container act as a parent to the flex item. Lets check all flex container properties and its behavior.

Display Flex : For any block level element default property is set as BLOCK i.e. display:block and items are laid out one below the other.

When you set display property to flex to a container i.e. display:flex all the direct child elements are laid out in a row as shown in above pic and you can apply all flex box related properties to an container.

Flex Container Properties:

1. flex-direction : Flex direction defines weather direct child elements must be laid out in a row or column.

2. flex-wrap : Flex wrap property is used to wrap items inside a container.

By default items try to fix in one line based on the max width of the container and space taken by each items.

wrap: Using flex-warp property to wrap will wrap the items to next row if items are not able to fit in container width.

no-wrap: (default) : All flex items will be on one line. Overflow will occur if items are not able to fit in container width.

wrap-reverse : Will wrap the items from bottom to top.

3. Flex Flow : Flex flow is an shorthand property of both flex-flow and flex-wrap. flex-flow : column wrap;

4. justify-content: The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow. i.e. when flex-direction is set as row then using justify-content will align item horizontally. Similarly when flex-direction is set as column then using justify-content will align item vertically[Main Axis for column]

flex-start: The initial value is flex-start which will line the items up at the start edge of the container.

flex-end: Will line the items up at the end edge of the container

flex-center: Will line the items up at the enter of the container

space-around: To cause an equal amount of space on the right and left of each item use the value space-around

space-between:  space is shared it out evenly between the items so there will be an equal amount of space between each item.

space-evenly: With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

5. align-items : align items align item in cross axis similar to how justify-content align item in main axis.

Using justify-content and align-items we can align item in both main and cross axis i.e. at the center of the container.

6. align-content : property sets the distribution of space between and around content items along a flexbox‘s cross-axis or a grid‘s block axis.

Leave a Reply

Your email address will not be published. Required fields are marked *