FLEXBOX IN CSS

WHAT IS FLEXBOX IN CSS ?

CSS Flexbox (Flexible Box Layout) is a CSS layout system designed to make it easy to arrange, align, and distribute space between items inside a container, even when their sizes are unknown or change dynamically.

HOW FLEXBOX WORKS

Flexbox has two main parts:

Flex container: The parent element with display: flex.
Flex items: The direct children inside the flex container.

PROPERTIES OF FLEXBOX IN CSS

Container properties
Property Purpose
display: flex Enables Flexbox
flex-direction Row or column layout
justify-content Aligns items along the main axis
align-items Aligns items along the cross axis
flex-wrap Allows wrapping
gap Adds space between items

Example:

.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
Item properties
Property Purpose
flex Controls how an item grows or shrinks
flex-grow Allows an item to grow
flex-shrink Allows an item to shrink
flex-basis Sets the initial size
align-self Overrides alignment for a single item

Example:

.item {
flex: 1;
}

.big-item {
flex: 2;
}