flexbox

CSS Flexbox provides several properties to create responsive and flexible layouts. Flexbox includes properties that apply to containers and items.

Flex:

The element behaves like a block element (takes up the full width available), but its children are laid out using Flexbox.

Inline-flex:

The element behaves like an inline element (doesn't force a line break and takes only the necessary space), while its children are laid out using Flexbox.

Flex display

Try it yourself

Property	Applies To	Description
display	Container	Defines a flex container.
flex-direction	Container	Sets main axis direction (row/column).
flex-wrap	Container	Enables wrapping of flex items.
flex-flow	Container	Shorthand for `flex-direction` and `flex-wrap`.
justify-content	Container	Aligns items along the main axis.
align-items	Container	Aligns items along the cross axis.
align-content	Container	Aligns wrapped lines along the cross axis.
flex	Items	Shorthand for grow, shrink, and basis.
flex-grow	Items	Controls how much an item grows.
flex-shrink	Items	Controls how much an item shrinks.
flex-basis	Items	Sets the initial size of the item.
align-self	Items	Overrides `align-items` for a single item.

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Flex:

Inline-flex:

Property

Applies To

Description