In this example we have two block-level container elements, each one with three inline children. Below that, we have a select menu that allows you to apply different display values to the containers, allowing you to compare and contrast how the different values affect the element's layout, and that of their children.
We've included padding and background-color on the containers and their children, so that it is easier to see the effect the display values are having.
Note: We've not included any of the modern multi-keyword syntax, as support for that is still fairly limited.
HTML
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<div>
<label for="display">Choose a display value:</label>
<select id="display">
<option selected>block</option>
<option>inline</option>
<option>inline-block</option>
<option>none</option>
<option>flex</option>
<option>inline-flex</option>
<option>grid</option>
<option>inline-grid</option>
<option>table</option>
<option>list-item</option>
</select>
</div>
CSS
html {
font-family: helvetica, arial, sans-serif;
letter-spacing: 1px;
padding-top: 10px;
}
article {
background-color: red;
}
article span {
background-color: black;
color: white;
margin: 1px;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
article,
div {
margin: 20px;
}
JavaScript
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");
function updateDisplay() {
articles.forEach((article) => {
article.style.display = select.value;
});
}
select.addEventListener("change", updateDisplay);
updateDisplay();
Result
Note: You can find more examples in the pages for each separate display data type, linked above.