Flex Box Properties in CSS
CSS Flexbox is a layout module that allows you to create flexible and responsive layouts. Here are some of the most commonly used Flexbox properties in CSS:
Before starting with the flexbox properties, we should understand which properties meant for flex container and flex items
Flexbox Container Properties
- display
- flex-direction
- flex-wrap
- justify-contents
- align-items
- align-contents
Flexbox Item Properties
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
- order
- display: This property specifies the display behavior of an element. To use Flexbox, you need to set the display property to flex or inline-flex.
- flex-direction: This property specifies the direction of the Flexbox layout. You can set it to row (horizontal), column (vertical), row-reverse, or column-reverse.
- flex-wrap: This property specifies whether the Flexbox items should wrap or not. You can set it to nowrap (default), wrap, or wrap-reverse.
- justify-content: This property specifies how the Flexbox items are distributed along the main axis. You can set it to flex-start, flex-end, center, space-between, space-around, or space-evenly.
- align-items: This property specifies how the Flexbox items are aligned along the cross axis. You can set it to flex-start, flex-end, center, stretch, or baseline.
- align-content: This property specifies how the Flexbox lines are aligned when there is extra space in the container. You can set it to flex-start, flex-end, center, space-between, space-around, or stretch.
- flex-grow: This property specifies how much an item should grow relative to the other items in the Flexbox container.
- flex-shrink: This property specifies how much an item should shrink relative to the other items in the Flexbox container.
- flex-basis: This property specifies the initial size of an item before any remaining space is distributed.
These are just some of the most commonly used Flexbox properties in CSS. By mastering these properties, you can create flexible and responsive layouts that adapt to different screen sizes and devices.