×

display:flex

Play with the code to see changes

              
            

The CSS display: flex property sets an HTML element as a block level flex container which takes the full width of its parent container. Any child elements that reside within the flex container are called flex items.

Flex items change their size and location in response to the size and position of their parent container.

×

display: inline-flex

Play with the code to see changes

              
            

The CSS display: inline-flex property sets an HTML element as an inline flex container which takes only the required space for the content. Any child elements that reside within the flex container are called flex items. Flex items change their size and location in response to the size and position of their parent container.

×

justify-content

Play with the code to see changes

              
            

The CSS justify-content flexbox property defines how the browser distributes space between and around content items along the main-axis of their container. This is when the content items do not use all available space on the major-axis (horizontally).

justify-content can have the values of:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
×

align-items

Play with the code to see changes

              
            

When working with CSS flexbox align-items is used to align flex items vertically within a parent container.

Below are five commonly used values for the align-items property:

  • flex-start — all elements will be positioned at the top of the parent container.
  • flex-end — all elements will be positioned at the bottom of the parent container.
  • center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
  • baseline — the bottom of the content of all items will be aligned with each other.
  • stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).
×

flex-grow

Play with the code or resize the window to see changes

              
            

The CSS flex-grow property allows flex items to grow as the parent container increases in size horizontally. This property accepts numerical values and specifies how an element should grow relative to its sibling elements based on this value.

The default value for this property is 0.

×

flex-shrink

Play with the code or resize the window to see changes

                  
                

The CSS flex-shrink property determines how an element should shrink as the parent container decreases in size horizontally. This property accepts a numerical value which specifies the ratios for the shrinkage of a flex item compared to its other sibling elements within its parent container.

The default value for this property is 1.

×

flex-basis

Play with the code or resize the window to see changes

                  
                

The flex-basis CSS property sets the initial base size for a flex item before any other space is distributed according to other flex properties.

×

flex

Play with the code or resize the window to see changes

                  
                

The flex CSS property specifies how a flex item will grow or shrink so as to fit within the space available in its flex container. This is a shorthand property that declares the following properties in order on a single line:

  • flex-grow
  • flex-shrink
  • flex-basis
×

flex-wrap

Play with the code or resize the window to see changes

                  
                

The flex-wrap property specifies whether flex items should wrap or not. This applies to flex items only. Once you tell your container to flex-wrap, wrapping become a priority over shrinking. Flex items will only begin to wrap if their combined flex-basis value is greater than the current size of their flex container.

×

align-content

Play with the code to see changes

                
              

The align-content property modifies the behavior of the flex-wrap property. It determines how to space rows from top to bottom (ie. along the cross axis). Multiple rows of items are needed for this property to take effect.

×

flex-direction

Play with the code see changes

              
            

The flex-direction CSS property specifies how flex items are placed in the flex container - either vertically or horizontally. This property also determines whether those flex items appear in order or in reverse order.

×

flex-flow

Play with the code or resize the window to see changes

                  
                

The CSS property flex-flow provides a shorthand for the properties flex-direction and flex-wrap. The value of the flex-direction property specifies the direction of the flex items and the value of the flex-wrap property allows flex items to move to the next line instead of shrinking to fit inside the flex container. The flex-flow property should be declared on the flex container.

×

Nested Flexboxes

Play with the code to see changes

                
              

A nested flexbox is a scenario where a flex container contains one or more flex containers as its children, creating a hierarchy of flex containers. This approach is useful for building complex web layouts with varying alignments and distributions of space.