<html> <head> <style> div { border: solid 1px; margin: 8px; } #flex-row { display: flex; flex-direction: row; justify-content: space-between; } #flex-column { display: flex; flex-direction: column; justify-content: space-between; height: 200px; width: 100px; } #vertical-centering { display: flex; align-items: center; justify-content: space-between; height: 200px; } </style> </head> <body> <div id="flex-row"> <section>Flex</section> <section>items</section> <section>in</section> <span>a</span> <span>row</span> </div> <br /> <div id="flex-column"> <section>Flex</section> <section>items</section> <section>in</section> <span>a</span> <span>column</span> </div> <div id="vertical-centering"> <section>Vertical</section> <section>centering</section> <section>used to be</section> <span>hard</span> </div> </body> </html>