flex_container

flex container enables a flexbox layout, which provides powerful and efficient ways to align and distribute space among items in the container, even when their sizes are dynamic or unknown.

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
gap

flex-direction:

The flex-direction property in CSS specifies the direction in which flex items are placed in a flex container. It determines the main axis along which the items are laid out, and it plays a critical role in how your layout is structured.

Syntax:

flex-direction: row | row-reverse | column | column-reverse;

Try it yourself

flex-wrap:

Determines whether the flex items should wrap to the next line if they overflow:

Syntax:

flex-wrap: wrap | no-wrap | wrap-reverse;

Try it yourself

flex-flow:

Shorthand for flex-direction and flex-wrap.

Try it yourself

justify-content:

Aligns items along the main axis:

Syntax:

justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly;

Try it yourself

align-items:

Aligns items along the cross axis:

Syntax:

align-items : flex-start | flex-end | center | baseline | stretch;

Try it yourself

align-content:

Aligns multiple rows of flex items when flex-wrap is applied:

Syntax:

align-content : flex-start | flex-end | center | stretch | space-between | space-around | space-evenly;

Try it yourself

gap:

Defines spacing between flex items:

row-gap for horizontal spacing.
column-gap for vertical spacing.
gap for both.

Syntax:

gap : value
cloumn-gap : value
row-gap : value

Try it yourself

❮ 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.