×
  • CSS Flexbox – Complete Beginners Guide

  • Flex Container Properties

    Lesson List

    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.
    flex container properties

  • We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept