Flex Container Properties

In this lesson, let me list down all the properties that can be applied in the flex container.

• Display : display: flex this is what defines a flex container and its mandatory to work with flexbox.

• Flex Direction :

  flex-direction: row-reverse defines the direction in which flex items are placed in the container.

  Value	Description
  row	Default value. The flexible items are displayed horizontally, as a row
  row-reverse	Same as row, but in reverse order
  column	The flexible items are displayed vertically, as a column
  column-reverse	Same as column, but in reverse order
  initial	Sets this property to its default value.
  inherit	Inherits this property from its parent element.

• Flex Wrap :

  flex-wrap: wrap which is used to control the wrapping of items within a container.

  Value	Description
  nowrap	Default value. Specifies that the flexible items will not wrap
  wrap	Specifies that the flexible items will wrap if necessary
  wrap-reverse	Specifies that the flexible items will wrap, if necessary, in reverse order
  initial	Sets this property to its default value.
  inherit	Inherits this property from its parent element.

• Flex Flow :

  flex-flow: row-reverse wrap its a shorthand for the combination of flex-direction and flax-wrap

  Value	Description
  flex-direction	Possible values: row row-reverse column column-reverse initial inherit Default value is “row”. Specifying the direction of the flexible items
  flex-wrap	Possible values: nowrap wrap wrap-reverse initial inherit Default value is “nowrap”. Specifying whether the flexible items should wrap or not
  initial	Sets this property to its default value.
  inherit	Inherits this property from its parent element.

• Justify Content :

  justify-content: center its defines the alignment of the item along the main axis.

  Value	Description
  flex-start	Default value. Items are positioned at the beginning of the container
  flex-end	Items are positioned at the end of the container
  center	Items are positioned at the center of the container
  space-between	Items are positioned with space between the lines
  space-around	Items are positioned with space before, between, and after the lines
  initial	Sets this property to its default value.
  inherit	Inherits this property from its parent element.

• Align Items :

  align-items: center It defines how the flex item is laid out along the cross axis.

  Value	Description
  stretch	Default. Items are stretched to fit the container
  center	Items are positioned at the center of the container
  flex-start	Items are positioned at the beginning of the container
  flex-end	Items are positioned at the end of the container
  baseline	Items are positioned at the baseline of the container
  initial	Sets this property to its default value.
  inherit	Inherits this property from its parent element.

• Align Content :

  align-content: center It defines how the flex item is laid out along the cross axis.

  Value	Description
  stretch	Default value. Lines stretch to take up the remaining space
  center	Lines are packed toward the center of the flex container
  flex-start	Lines are packed toward the start of the flex container
  flex-end	Lines are packed toward the end of the flex container
  space-between	Lines are evenly distributed in the flex container
  space-around	Lines are evenly distributed in the flex container, with half-size spaces on either end
  initial	Sets this property to its default value.
  inherit	Inherits this property from its parent element.