WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

CSS Flex Container

Previous Next

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:

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