CSS Flexbox

Flex box contains flex items and flex container. In CSS, the concept of Flex box is as follow,

The container can be displayed as,


/*the flex items can be defined as*/


The flex items are placed in the flex container. The flexbox is a single direction layout concept. The flex items layout is either in horizontal rows and vertical columns.

The flex direction as shown bellow

   flex-direction: row; /* you can use row-reverse, column, column-reverse*/
  • row: left to right in ltr, right to left in rtl
  • row-reverse: right to left in ltr, right to left in rtl
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse but bottom to top


See the Pen flexbox by Arpit (@soniarpit) on CodePen.

Various properties of flex are,

displaySpecifies the type of box used for an HTML element
flex-directionSpecifies the direction of the flexible items inside a flex container
justify-contentHorizontally aligns the flex items when the items do not use all available space on the main-axis
align-itemsVertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrapSpecifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-contentModifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flowA shorthand property for flex-direction and flex-wrap
orderSpecifies the order of a flexible item relative to the rest of the flex items inside the same container
align-selfUsed on flex items. Overrides the container’s align-items property
flexA shorthand property for the flex-grow, flex-shrink, and the flex-basis properties

Previous: CSS Variables

Next: CSS Media Queries