Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document </title> <style> #container { height: 200px; width: 230px; place-items: center; background-color: #ccc; } .flex { display: flex; flex-wrap: wrap; } div > div { box-sizing: border-box; border: 3px solid #ccc; width: 50px; display: flex; align-items: center; justify-content: center; } #box1 { background-color: #666; min-height: 40px; } #box2 { background-color: #1c87c9; min-height: 50px; } #box3 { background-color: #fff; min-height: 40px; } #box4 { background-color: #ff0000; min-height: 60px; } #box5 { background-color: #eee; min-height: 70px; } #box6 { background-color: #8ebf42; min-height: 50px; } </style> </head> <body> <h2>Place-items property example</h2> <div id="container" class="flex"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> <div id="box4">4</div> <div id="box5">5</div> <div id="box6">6</div> </div> </body> </html>