Flexbox three column grid

<!doctype html> <html class="no-js" lang=""> <head> <style> #container { display: flex; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -o-flex; flex-flow: row wrap; -moz-flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; -o-flex-flow: row wrap; justify-content: space-between; -moz-justify-content: space-between; -webkit-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; } #container > div { width: 160px; height: 160px; text-align: center; background-color: rgba(56, 77, 158, 0.8); } </style> </head> <body> <div id="container"> <div>Box One</div> <div>Box Two</div> <div>Box Three</div> </div> </body> </html>
Using the Flexbox approach this displays three blue boxes with even space between them.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.