<main>
<div class="wrapper">
<article class="flow">
<h1>การใช้งาน <code>flex-direction</code></h1>
<div class="controls">
<label>
เลือก <code>flex-direction</code> ที่ต้องการทดสอบ
<select id="switcher">
<option value="row">row</option>
<option value="row-reverse">row-reverse</option>
<option value="column">column</option>
<option value="column-reverse">column-reverse</option>
</select>
</label>
</div>
<div class="container">
<div class="box box-1">กล่องที่ 1</div>
<div class="box box-2">กล่องที่ 2</div>
<div class="box box-3">กล่องที่ 3</div>
</div>
</article>
</div>
</main>
.container {
display: flex;
gap: 1em;
padding: 1em;
border: 1px solid black;
background-color: gray;
margin: 1em 0;
}
.box {
border: 1px solid black;
padding: 1em;
}
.box-1 {
order: 1;
background-color: pink;
}
.box-2 {
order: 2;
background-color: lightgreen;
}
.box-3 {
order: 3;
background-color: skyblue;
}
select {
width: min( 100vw - 2rem, 300px );
padding: 1em;
}
const switcher = document.getElementById("switcher");
const container = document.querySelector(".container");
switcher.addEventListener("change", (e) => {
container.style.flexDirection = e.target.value;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.