CSS Flex or FlexBox Item

Flex Child properties refer to the properties used to control the behavior and layout of individual items within a Flex Container.


Flex Item properties

For control flex item, it uses various properties, in this section will list them all with example

  • order :

    • Controls the order in which flex items appear within the flex container.

    • Accepts integer values; items with lower values appear first.


  • flex-grow :

    • Specifies how much a flex item can grow relative to other flex items.

    • Determines the proportion of available space to distribute among flex items.


  • flex-shrink :

    • Defines the ability of a flex item to shrink if necessary.

    • Determines how much an item will shrink relative to other items.


  • flex-basis :

    • Sets the initial size of a flex item along the main axis.

    • Determines the default size of an item before any available space is distributed.


  • flex :

    • Shorthand for flex-grow, flex-shrink, and flex-basis.

    • Allows specifying all three values in a single property.


  • align-self :

    • Overrides the align-items property for a specific flex item.

    • Aligns a single flex item along the cross axis within the flex container.


Flex Item order property

Utilizing the order property in Flexbox provides granular control over the visual order of flex items within a Flex Container, offering flexibility in arranging elements for various layout needs without changing the HTML structure.

  • Value : Accepts integer values (positive, negative, or zero).

  • Default : By default, all flex items have an order of 0.

  • Positive Value : Positive values move items later in the sequence

  • Negative Value : Negative values bring them earlier.


Flex Item flex-grow property

flex-grow is a CSS property used in flexbox layouts to define the ability of a flex item to grow within a flex container. It determines the proportion of available space that a flex item should take up along the main axis of the flex container when there’s extra space.

  • Value : It accepts a unitless value that represents the growth factor relative to other flex items in the same container.

  • Example : If one item has a flex-grow value of 2 and another has a value of 1, the first item will grow twice as much as the second item when there is additional space available along the main axis.

  • Default : By default, the value of flex-grow is 0, meaning the item won’t grow to take up any available space beyond its initial size unless explicitly instructed.


Flex Item flex-shrink property

flex-shrink defines the ability of a flex item to shrink relative to the other items within the same flex container when there isn’t enough space available along the main axis.

  • Value : It accepts a unitless value that represents the ability of a flex item to shrink when necessary.

  • Example : If an item has flex-shrink: 2 and another has flex-shrink: 1, the first item will shrink twice as much as the second item when space is constrained along the main axis.

  • Default : By default, the value of flex-shrink is 1, meaning the item is allowed to shrink relative to other flex items within the container.

    • If set to 0, the item will not shrink when there’s a lack of space.


Flex Item flex-basis property

The flex-basis property in CSS is used within flexbox layouts to define the initial size of a flex item along the main axis before the available space is distributed among the flex items.

  • Value : It sets the initial size of a flex item before any free space is distributed or before any flex-grow or flex-shrink calculations come into play.

    • auto : This value allows the browser to calculate the size of the item based on its content and layout rules. It might use the item’s intrinsic size, or if no intrinsic size is available, it could default to the item’s content width or height.

    • fit-content : This value calculates the size of the item based on its content, similar to auto. However, it takes into account the available space within the flex container and doesn’t allow the item to expand beyond that space.

    • content : This value is not part of the standard CSS flex-basis property. Instead, it seems to refer to the intrinsic content size, which is the size required by an element’s content without any additional constraints or modifications applied by CSS.

  • Default : By default, it’s set to auto, which means the initial size of the item is determined by its content or any width/height properties set explicitly.


Flex Item align-self property

align-self is a CSS property used in flexbox layouts to individually control the alignment of a single flex item along the cross axis, overriding the default alignment set by the parent flex container for that specific item.

  • Targeting Individual Items : While align-items is used to align all flex items within the container, align-self targets a specific flex item within that container to set its alignment along the cross axis.

  • Value : It accepts the same values as align-items, such as flex-start, flex-end, center, baseline, or stretch, which determine how the individual flex item should align itself.

  • Default : The default value is typically auto, which means it inherits the alignment value from its parent container’s align-items property.

Share