CSS place-content Property - Playground Example

« Back to CSS place-content Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#flex-container {
    display: flex; 
    flex-wrap: wrap; 
    height: 300px;
    background: rgb(0,150,208); 
    margin: 10px; 
    text-align: center;
}
div > div {
    width: 20%; 
    background: rgb(241,101,41); 
    border: 1px solid; 
} 
</style>
</head>
<body>
<body> 
	place-content:
	<select id="alignContentControl">
	   <option value="stretch">stretch</option>
	   <option value="flex-start">flex-start</option>
	   <option value="flex-end">flex-end</option>
	   <option value="center">center</option>
	   <option value="space-between">space-between</option>
	   <option value="space-around">space-around</option>
	   <option value="space-evenly">space-evenly</option>
	</select>
	<select id="justifyContentControl">
	   <option value="flex-start">flex-start</option>
	   <option value="flex-end">flex-end</option>
	   <option value="center">center</option>
	   <option value="space-between">space-between</option>
	   <option value="space-around">space-around</option>
	   <option value="space-evenly">space-evenly</option>
	</select>
	<div id="flex-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<script>
   const container = document.getElementById("flex-container");
   alignContentControl = document.getElementById("alignContentControl");
   justifyContentControl = document.getElementById("justifyContentControl");
   updateAlignment = function() { 
   container.style.placeContent = alignContentControl.value + " " + justifyContentControl.value; 
   }
   alignContentControl.addEventListener("change",  updateAlignment);
   justifyContentControl.addEventListener("change", updateAlignment);
</script>
      </body>
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee