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)