HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> h2+div{ display:flex; align-items: flex-start; -webkit-align-items: flex-start; height:200px; border:1px solid #000; } h2+div > div{ border:1px solid #267326; padding:10px 0; margin:10px; width: 90px; -webkit-flex: 1; /* Safari 6.1+ */ flex: 1; } #parent > div:nth-child(2){ -webkit-align-self: auto; align-self: auto; } #parent1 > div:nth-child(2){ -webkit-align-self: stretch; align-self: stretch; } #parent2 > div:nth-child(2){ -webkit-align-self: center; align-self: center; } #parent3 > div:nth-child(2){ -webkit-align-self: flex-start; align-self: flex-start; } #parent4 > div:nth-child(2){ -webkit-align-self: flex-end; align-self: flex-end; } #parent5 > div:nth-child(2){ -webkit-align-self: baseline; align-self: baseline; } </style> </head> <body> <h1>CSS align-self Property</h1> <h2>align-self: auto;</h2> <div id="parent"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>align-self: stretch;</h2> <div id="parent1"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>align-self: center;</h2> <div id="parent2"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>align-self: flex-start;</h2> <div id="parent3"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>align-self: flex-end;</h2> <div id="parent4"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>align-self: baseline;</h2> <div id="parent5"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> </body> </html>
OUTPUT
×

Save as Private