<div class="controls">
<label for="switcher">align-items</label>
<select id="switcher">
<option value="start">start</option>
<option value="self-start">self-start</option>
<option value="end">end</option>
<option value="self-end">self-end</option>
</select>
<p><em>Text direction on the second item is right to left</em></p>
</div>
<div class="container">
<div class="item">Item 1</div>
<div class="item" style="direction: rtl">Item 2</div>
<div class="item">Item 3</div>
</div>
:root {
--var-align-items: start;
}
.container {
border: 5px solid rgba(149, 184, 209, 1);
background-color: rgba(149, 184, 209, .3);
display: flex;
gap: 10px;
inline-size: 300px;
flex-direction: column;
align-items: var(--var-align-items);
}
.item {
background-color: rgba(59, 51, 85, 1);
color: #fff;
padding: 10px;
}
.controls {
margin: 1em 0;
border: 1px solid #ccc;
padding: 10px;
}
body {
font: 1em system-ui;
}
let switcher = document.getElementById("switcher");
let switcher2 = document.getElementById("switcher2");
let root = document.documentElement;
switcher.addEventListener("change", function (evt) {
root.style.setProperty('--var-align-items', evt.target.value);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.