When I scroll the range slider to change the spacing(corresponding to change in padding of img in this example) the elements above are pushed up. But it works the way as expected when I use "text-align: center" rather than flex box. I wonder why flex item behaves this way. Shouldn't it expand in the opposite direction instead of pushing things up?
const controls = document.querySelectorAll(".control");
// const controls = document.querySelectorAll(".controls input")
const root = document.documentElement;
const handleChange = function (e) {
const propertyName = e.target.name;
const value = e.target.value;
const unit = e.target.dataset.unit || "";
root.style.setProperty(`--${propertyName}`, `${value}${unit}`);
};
for (const control of controls) {
control.addEventListener("change", handleChange);
control.addEventListener("input", handleChange);
} :root {
--spacing: 10px;
--blur: 10px;
--base: #ffc600;
}
html {
font-size: 62.5%;
}
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
margin: 0;
}
body {
font-size: 4rem;
padding-top: 2rem;
background-color: #193549;
color: white;
/* text-align: center; */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body > * + * {
margin-top: 4rem;
}
span {
color: var(--base);
}
input[type="range"] {
display: inline-block;
vertical-align: middle;
width: 10rem;
}
input[type="color"] {
width: 10rem;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<h1>Update CSS Variables with <span>JS</span></h1>
<div class="controls">
<label for="">Spacing:</label>
<input
name="spacing"
class="control"
type="range"
min="10"
max="200"
value="10"
data-unit="px"
/>
<label for="">Blur:</label>
<input
name="blur"
class="control"
type="range"
min="0"
max="25"
value="10"
data-unit="px"
/>
<label for="">Base Color:</label>
<input name="base" class="control" type="color" value="#f6b73c" />
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" alt="image" />
</body>
</html>