<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
background-color: skyblue;
height: 500px;
transition: all 1s;
}
.item {
width: 200px;
margin: 1rem;
text-align: center;
font-size: 24px;
border: 5px dashed white;
background: aqua;
transition: all 1s;
}
</style>
</head>
<body>
<div id="container" class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
<h2>.container</h2>
<label for="">
flex-direction
<select name="flex-direction" data-selector="#container">
<option value="row">row(default)</option>
<option value="row-reverse">row-reverse</option>
<option value="column">column</option>
<option value="column-reverse">column-reverse</option>
</select>
</label>
<br />
<label for="">
flex-wrap
<select name="flex-wrap" data-selector="#container">
<option value="nowrap">nowrap(default)</option>
<option value="wrap">wrap</option>
<option value="wrap-reverse">wrap-reverse</option>
</select>
</label>
<br />
<label for="">
justify-content
<select name="justify-content" data-selector="#container">
<option value="flex-start">flex-start(default)</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>
<option value="start">start</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="safe">safe</option>
<option value="unsafe">unsafe</option>
</select>
</label>
<br />
<label for="">
align-items
<select name="align-items" data-selector="#container">
<option value="stretch">stretch(default)</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="baseline">baseline</option>
<option value="first baseline">first baseline</option>
<option value="last baseline">last baseline</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="self-start">self-start</option>
<option value="self-end">self-end</option>
<option value="safe">safe</option>
<option value="unsafe">unsafe</option>
</select>
</label>
<br />
<label for="">
align-content
<select name="align-content" data-selector="#container">
<option value="normal">normal(default)</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>
<option value="stretch">stretch</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="baseline">baseline</option>
<option value="first baseline">first baseline</option>
<option value="last baseline">last baseline</option>
<option value="safe">safe</option>
<option value="unsafe">unsafe</option>
</select>
</label>
<h2>.item</h2>
<label for="">
order
<select id="order" name="order" data-selector="order">
<option value=".item1">item1</option>
<option value=".item2">item2</option>
<option value=".item3">item3</option>
<option value=".item4">item4</option>
<option value=".item5">item5</option>
<option value=".item6">item6</option>
</select>
<input
type="number"
name=""
value="0"
id="order-number"
data-selector="order"
/>
</label>
<br />
<label for="">
flex-grow
<select id="flex-grow" name="flex-grow" data-selector="flex-grow">
<option value=".item1">item1</option>
<option value=".item2">item2</option>
<option value=".item3">item3</option>
<option value=".item4">item4</option>
<option value=".item5">item5</option>
<option value=".item6">item6</option>
</select>
<input
type="number"
name=""
value="0"
id="flex-grow-num"
data-selector="flex-grow"
/>
</label>
<br />
<label for="">
flex-shrink
<select id="flex-shrink" name="flex-shrink" data-selector="flex-shrink">
<option value=".item1">item1</option>
<option value=".item2">item2</option>
<option value=".item3">item3</option>
<option value=".item4">item4</option>
<option value=".item5">item5</option>
<option value=".item6">item6</option>
</select>
<input
type="number"
name=""
value="0"
id="flex-shrink-num"
data-selector="flex-shrink"
/>
</label>
<br />
<label for="">
flex-basis
<select id="flex-basis" name="flex-basis" data-selector="flex-basis">
<option value=".item1">item1</option>
<option value=".item2">item2</option>
<option value=".item3">item3</option>
<option value=".item4">item4</option>
<option value=".item5">item5</option>
<option value=".item6">item6</option>
</select>
<input
type="number"
name=""
value="0"
id="flex-basis-num"
data-selector="flex-basis"
/>
<select name="flex-basis" id="flex-basis2" data-selector="flex-basis2">
<option value="auto">auto(default)</option>
<option value="max-content">max-content</option>
<option value="min-content">min-content</option>
<option value="fit-content">fit-content</option>
<option value="fill">fill</option>
<option value="content">content</option>
</select>
</label>
<br />
<label for="">
align-self
<select id="align-self" name="align-self" data-selector="align-self">
<option value=".item1">item1</option>
<option value=".item2">item2</option>
<option value=".item3">item3</option>
<option value=".item4">item4</option>
<option value=".item5">item5</option>
<option value=".item6">item6</option>
</select>
<select
name="align-self"
id="align-self-value"
data-selector="align-self"
>
<option value="auto">auto</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="baseline">baseline</option>
<option value="stretch">stretch</option>
</select>
</label>
<script>
let container = document.querySelector("#container");
document.addEventListener(
"change",
function (e) {
let property = e.target.name;
let value = e.target.value;
let selector = e.target.dataset.selector;
switch (selector) {
case "#container":
document.querySelector(selector).style[property] = value;
break;
case "order": {
let itemSelector = document.querySelector("#order").value;
let num = document.querySelector("#order-number").value;
document.querySelector(itemSelector).style.order = num;
break;
}
case "flex-grow": {
let itemSelector = document.querySelector("#flex-grow").value;
let num = document.querySelector("#flex-grow-num").value;
document.querySelector(itemSelector).style["flex-grow"] = num;
break;
}
case "flex-shrink": {
let itemSelector = document.querySelector("#flex-shrink").value;
let num = document.querySelector("#flex-shrink-num").value;
document.querySelector(itemSelector).style["flex-shrink"] = num;
break;
}
case "flex-basis": {
let itemSelector = document.querySelector("#flex-basis").value;
let num = document.querySelector("#flex-basis-num").value;
document.querySelector(itemSelector).style["flex-basis"] =
num + "px";
break;
}
case "flex-basis2": {
let itemSelector = document.querySelector("#flex-basis").value;
let num = document.querySelector("#flex-basis2").value;
document.querySelector(itemSelector).style["flex-basis"] = num;
break;
}
case "align-self": {
let itemSelector = document.querySelector("#align-self").value;
let num = document.querySelector("#align-self-value").value;
document.querySelector(itemSelector).style["align-self"] = num;
break;
}
}
},
false
);
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.