HTML CSS examples for CSS Layout:Flex Align
Align text to the bottom of Image in flex items
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .flex-container {<!-- www. j a v a2 s . c o m--> display: flex; flex-direction: row; align-items: flex-end; } .flex-boxes { flex: 0 0 33.33%; /* NEW */ border: 2px solid red; } .cat { width: auto; } </style> </head> <body> <div class="flex-container"> <div class="flex-boxes"> A </div> <div class="flex-boxes"> <img class="cat" src="https://www.java2s.com/style/demo/Safari.png"> </div> <div class="flex-boxes"> C </div> </div> </body> </html>