Tailwind CSS Flex

The CSS flexbox is a vital feature to develop the frontend, there is four flex available in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex Property for fast development of front-end. It is used to set the length of flexible items. The flex class is much responsive and mobile-friendly. It is easy to positioning child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section.

Flex:

• flex-1
• flex-initial
• flex-auto
• flex-none

flex-1: A ratio that specifies, how much items will grow relative to the rest of the flexible items. It has been used to allow a flex item to grow and shrink as needed, ignoring its initial size.

Syntax:

 <element class="flex-1"> Contents... </element>

Example:

Output:

👁 Image

flex-initial: This class defines how much that item will grow relative to the rest of the flexible items. It has been used to allow a flex item to shrink but not grow, taking into account its initial size

Syntax:

  <element class="flex-initial">..</element>

Example:

Output:

👁 Image

flex-auto: This class specifies, how much that item will grow relative to the content of the flexible items. It has been used to allow a flex item to grow and shrink as needed, ignoring its initial size.

Syntax:

  <element class="flex-auto"> Contents... </element>

Example:

Output:

👁 Image

flex-none: This class set the restriction to growing or shrinking the element if extra space available or not. This is to prevent a flex item from growing or shrinking, it only takes the space according to the size of the content

Syntax:

  <element class="flex-none">..</element>

Example:

Output:

👁 Image