The flex property in CSS is part of the Flexible Box Layout module, a one-dimensional layout model used for designing responsive layouts that align and distribute space among items in a container. It makes tasks like vertical centering and creating equal-height columns straightforward.
Properties for the Flex Container
- display- Enables the flex content.
flex: Generates a block-level flex container.
inline-flex: Generates an inline-level flex container.
flex-direction: Defines the main axis and the direction.
-flex-wrap: Controls whether items wrap onto multiple lines (wrap) or stay on a single line (nowrap, the default).
justify-content: Aligns items along the main axis (e.g., flex-start, flex-end, center, space-between, space-around, space-evenly).
align-content: Aligns multiple lines of flex items when flex-wrap is set to wrap and there is extra space in the cross axis.
gap (or row-gap, column-gap): Explicitly controls the space between flex items.
Properties for the Flex Items
- These properties control individual items within the container.
order: Specifies the display order of an item, overriding the source HTML order (default is 0).
flex: A shorthand property for flex-grow, flex-shrink, and flex-basis.
flex-grow: Defines the ability for an item to grow and fill available space (default is 0).
flex-shrink: Defines the ability for an item to shrink if there is not enough space (default is 1).
flex-basis: Defines the initial size of an item before the remaining space is distributed (default is auto).
align-self: Overrides the align-items value for a specific flex item, allowing individual alignment along the cross axis.
Top comments (0)