Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> #container { height: 350px; width: 60%; border: solid black 1px; display: flex; flex-wrap: wrap; place-content: end space-between; } #container > div { flex-basis: 40px; height: 40px; margin: 2px; background-color: coral; } </style> </head> <body> <h1>The place-content Property</h1> <p>Resize window to see the effect more clearly. The flex lines are placed at the bottom of the container in the column direction, and the flex items are aligned with the same space between them in the row direction.</p> <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
