![Flexbox Tutorial](/flexbox/images/flexbox-mini-logo.jpg)
- Flexbox Tutorial
- Flexbox - Home
- Flexbox - Overview
- Flexbox - Flex Containers
- Flexbox - Flex-Direction
- Flexbox - Flex-Wrap
- Flexbox - Justifying Contents
- Flexbox - Align Items
- Flexbox - Align Content
- Flexbox - Flex-Order
- Flexbox - Flexibility
- Flexbox - Align Self
- Flexbox Useful Resources
- Flexbox - Quick Guide
- Flexbox - Useful Resources
- Flexbox - Discussion
Flexbox - Align Self
This property is similar to align-items, but here, it is applied to individual flex items.
Usage −
align-self: auto | flex-start | flex-end | center | baseline | stretch;
This property accepts the following values −
flex-start − The flex item will be aligned vertically at the top of the container.
flex-end − The flex item will be aligned vertically at the bottom of the container.
flex-center − The flex item will be aligned vertically at the center of the container.
Stretch − The flex item will be aligned vertically such that it fills up the whole vertical space of the container.
baseline − The flex item will be aligned at the base line of the cross axis.
flex-start
On passing this value to the property align-self, a particular flex-item will be aligned vertically at the top of the container.
![Flex Align Self Start](/flexbox/images/flex_alignself_start.jpg)
The following example demonstrates the result of passing the value flex-start to the align-self property.
<!doctype html> <html lang = "en"> <style> .box1{background:green;} .box2{background:blue;} .box3{background:red;} .box4{background:magenta; align-self:start;} .box5{background:yellow;} .box6{background:pink;} .box{ font-size:35px; padding:15px; } .container{ display:flex; height:100vh; border:3px solid black; align-items:flex-start; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>
It will produce the following result −
flex-end
On passing this value to the property align-self, a particular flex-item will be aligned vertically at the bottom of the container.
![Flex Align Self End](/flexbox/images/flex_alignself_end.jpg)
The following example demonstrates the result of passing the value flex-end to the align-self property.
<!doctype html> <html lang = "en"> <style> .box1{background:green;} .box2{background:blue;} .box3{background:red;} .box4{background:magenta; align-self:flex-end;} .box5{background:yellow;} .box6{background:pink;} .box{ font-size:35px; padding:15px; } .container{ display:flex; height:100vh; border:3px solid black; align-items:flex-start; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>
It will produce the following result −
center
On passing the value center to the property align-self, a particular flex-item will be aligned vertically at the center of the container.
![Flex Align Self Center](/flexbox/images/flex_alignself_center.jpg)
The following example demonstrates the result of passing the value center to the align-self property.
<!doctype html> <html lang = "en"> <style> .box1{background:green;} .box2{background:blue;} .box3{background:red;} .box4{background:magenta; align-self:center;} .box5{background:yellow;} .box6{background:pink;} .box{ font-size:35px; padding:15px; } .container{ display:flex; height:100vh; border:3px solid black; align-items:flex-start; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>
It will produce the following result −
stretch
On passing this value to the property align-self, a particular flex item it will be aligned vertically such that it fills up the whole vertical space of the container.
![Flex Align Self Stretch](/flexbox/images/flex_alignself_stretch.jpg)
The following example demonstrates the result of passing the value stretch to the align-self property.
<!doctype html> <html lang = "en"> <style> .box1{background:green;} .box2{background:blue;} .box3{background:red;} .box4{background:magenta; align-self:stretch;} .box5{background:yellow;} .box6{background:pink;} .box{ font-size:35px; padding:15px; } .container{ display:flex; height:100vh; border:3px solid black; align-items:flex-start; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>
It will produce the following result −
To Continue Learning Please Login