DEV Community

Arun Kumar
Arun Kumar

Posted on

CSS Display flex property

The flexible box layout module (usually referred to as flexbox) is a one-dimensional layout model for distributing space between items

The two axcs of flexbox

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

The main axis

The main axis is defined by flex-direction, which has four possible values:

  • row
  • column

Should you choose row your main axis will run along the row in the inline direction.

Choose column and your main axis will run in the block direction

The flex container

An area of a document that is laid out using flexbox is called a flex container. To create a flex container, set the area's display property to flex. When we do this, the direct children of that container become flex items.

  • align-items
    The align-items property aligns all the flex items on the cross axis.

  • justify-content
    The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow.

Conclusion

display: flex is the powerful layout tool in CSS that provides the flexible way to design the responsive layouts. By using the flex properties

Top comments (0)