CSS – Flexbox – Define a Flex Container
A Flexbox container allows for a responsive layout structure, giving you complete control over the direction, alignment, order, and size of the boxes.
CSS – Flexbox – Define the Flex Direction
The flex-direction property defines in which direction a flex container will stack the flex items within.
CSS – Flexbox – Define the Flex Wrap
The flex-wrap property specifies whether the flex items should wrap or not wrap within the flex container.
CSS – Flexbox – Define Content Justification
The justify-content property is used to align the flex items within the flex container.
CSS – Flexbox – Vertically Aligning the Content
The align-items property is used to vertically align the flex items within the flex container.
CSS – Flexbox – Vertically Aligning a Specified Flex Item
The align-self property defines the alignment for a specified item and overrides the default vertical alignment set by the container’s align-items property.
CSS – Flexbox – Vertically Align Wrapped Content
The align-content property is used to vertically align the wrapped flex lines of items within the flex container.
CSS – Flexbox – Centering Horizontally and Vertically
Using Flexbox, the justify-content property, and align-items property, an element can be centered both horizontally and vertically within it’s parent.
CSS – Flexbox – Specifying the Order of Items
The order property determines the order of a flex item. The first flex item to appear in the code does not have to appear as the first item in the layout.
CSS – Flexbox – Specify the Initial Length of Items
The flex-basis property specifies the initial length of a flex item.
CSS – Flexbox – Growing the Width of Items
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items to fill their parent container.
CSS – Flexbox – Shrinking the Width of Items
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items while filling their parent container.