TheFlexBox layout is initiated with thedisplay: flex; property and you can control how the children of the element are laid-out inside the parent on the webpage.

The flexbox layout plays probably plays a very important role in planning a responsive web layout.

(CSS).parent{display:flex;...otherproperties}

For the display property, the flex value can be along with inline (display: inline flex ordisplay: inline-flex) to define inline flex containers and with block (display: block flex ordisplay: block-flex) to define block flex containers.flex used by itself defines a block level container

(HTML)<divclass='parent'><divclass='child1'>        ...content of child 1</div><divclass='child2'>        ...content of child 2</div>    ....</div>

Each item inside a flexbox is calledflex item and the flexbox itself is referred to as theflex container.

The layout of flex items can be in either horizontal or vertical direction.

Main Axis and Cross Axis

The direction in the items are laid out is known as themain axis and the direction perpendicular to the main axis is known as thecross axis.

By default,row is the main axis, this can be changed by specifying the desiredflex-direction.

The size of a flex item along the main axis is identified as themain size, where as its size along the cross axis is thecross size

Properties for the flexbox

Flexbox has properties some applicable at the parent and while others at the child levels that can be used to create innovative layouts.

At parent (or container) level...

Here are the properties that must be specified for the container element to control the flow of flex items in it.

• flex-direction

  determines the direction in which the successive items is to placed in the flex container.

  When the direction isrow orrow-reverse the main axis is in the horizontal direction.

  

  Similarly, when the direction iscolumn orcolumn-reverse the main axis is in the vertical direction.

  

  Note

  When flex-direction: row, then defaultwidth of container is100%, and

  When flex-direction: column, the defaultheight is the height required to render the content.

• flex-wrap

  determines whether are items will be laid out on one line or may flow onto multiple lines.

• flex-flow

  This is the shorthand property for...

  • flex-direction
  • flex-wrap

• justify-content

  justifies the overall content along themain axis.

• justify-items

  sets the justification of the individual elements along the main axis within the dimensions designated to it afterjustify-content is processed.

  This setting applies to each of the elements in the flexbox, unless ajustify-self is specified at the child level.

• align-content

  Aligns the overall content along thecross axis.

• align-items

  Aligns the individual elements along the cross axis within the dimensions designated to it afteralign-content is processed.

  This alignment is applied to each of element in the flexbox, unless aalign-self is specified at the child level.

• place-content

  This is a shorthand property for

  • align-content, and
  • justify-content.

  If one value is provided, that value applied to bothalign-content andjustify-content.

  If two values are provided, the first will be foralign-content and the second will be forjustify-content.

• place-items

  This is a shorthand property for

  • align-items and
  • justify-items.

  If one value is provided, that value applied to bothalign-items andjustify-items.

  If two values are provided, the first will be foralign-items and the second will be forjustify-items.

• column-gap

  Determines the gap between columns in theflex box. Also works forgrid andmulti-column container.

• row-gap

  Determines the gap between rows in theflex andgrid containers

• gap

  This is the shorthand property for...

  • column-gap
  • row-gap

At child level...

Below are the properties that may be specified to control the rendering of the flex items.

• flex

  This is shorthand property for...

  • flex-grow
  • flex-shrink
  • flex-basis

• flex-grow

  This determines how thepositive free space in the flex container is assigned to themain-size of the item i.e. it specifies the grow factor for an item.

• flex-shrink

  This determines how thenegative free space in the flex container is assigned to themain-size of the item i.e. it specifies the shrink factor for an item.

• flex-basis

  This specifies the initial main size for the flex item. The final computed main size will depend when theflex-grow andflex-shrink values are applied to this.

• justify-self

  This property overrides thejustify-items property defined for the flex container.

• align-self

  This property overrides thealign-items property defined for the flex container.

• place-self

  This property overrides theplace-items property values provided for the flex container.

• order

  Theorder property defines the sequence in which each flex item is rendered.