Scribd
Upload
3 views

CSS Flexbox

The document provides an overview of CSS Flexbox, detailing properties such as flex-direction, justify-content, align-items, align-self, order, and flex-grow/flex-shrink. It explains how these properties affect the layout and alignment of flex items within a flex container. Syntax examples are included for each property to illustrate their usage.

Uploaded by

chipadeshailesh7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Flexbox

The document provides an overview of CSS Flexbox, detailing properties such as flex-direction, justify-content, align-items, align-self, order, and flex-grow/flex-shrink. It explains how these properties affect the layout and alignment of flex items within a flex container. Syntax examples are included for each property to illustrate their usage.

Uploaded by

chipadeshailesh7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS FLEXBOX

EDUTECH_TRAINING_SERVICES
CSS Flexbox
CSS Flexbox

CROSS AXIS
CSS Flexbox-Direction
Property Name: flex-direction is the property used to define the direction in a flex

container.

Row Layout: row value aligns the flex items horizontally, in a left-to-right fashion.

Column Layout: column value stacks the flex items vertically, from top to bottom.

Reverse Direction: Adding -reverse to row or column (as in row-reverse or column-

reverse) reverses the order of the items.

Syntex

Selector {
Display : flex ;
flex-direction: row ;
}
CSS Flexbox Justify-Content

Alignment : Aligns flex items along the main axis.


flex-start : Items align to the start of the flex container.
flex-end : Items align to the end of the flex container.
Center : Items are cantered within the flex container.
space-between/space-around/space-evenly : Distributes space
between items evenly.

Syntex

Selector {
Display : flex ;
justify-content : space-between ;
}
CSS Flexbox-Wrap

Syntex

Selector {
Display : flex ;
flex-wrap : wrap ;

}
CSS Flexbox Align-items

This property is used to align the flex container's items along the cross-axis, which is
perpendicular to the main axis.

Syntex

Selector {
display : flex ;
justify-content : center ;
align-items : center ;
}
CSS Flexbox Align-Self

AIlows individual flex items to override the container's align-items property,


aligning them differently along the cross-axis.

Syntex

Selector {
align-self : end ;

}
CSS Flexbox Order

The order property specifies the order of the flex items inside the flex container.

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

Syntex

Selector {
order : 3 ;

}
CSS Flexbox Grow & Shrink

The flex-grow property specifies how much a flex item will grow relative to the

rest of the flex items.

The flex-shrink property specifies how much a flex item will shrink relative to

the rest of the flex items.

Syntex
Syntex
Selector {
Selector {
flex-shrink : 2 ;
flex-grow : 5 ;
}
}
CSS Flexbox Grow & Shrink

EduTECH Pune

You might also like