HTML ⟩ element ⟩ <select>
The <select> HTML element represents a control that provides a menu of options.
📁 html
<!-- 用 <label> 包裝 <select> 的標籤文字與整個下拉式選單 -->
<label>
<!-- <select> 標籤文字 -->
flex-direction:
<!-- <select> 下拉式選單 -->
<select id="flexDirection">
<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>
📁 js
// 1. 先找出 id="flex-direction" 的 <select> 元素
const flexDirectionSelect = document.getElementById('flexDirection');
// 2. 監聽下拉式選單的變更
flexDirectionSelect.addEventListener('change', updateFlexbox);
// 3. 根據下拉式選單的變更，做相對應的反應(更新 flexbox style 屬性)
function updateFlexbox() {
flexContainer.style.flexDirection = flexDirectionSelect.value;
}
可用 <select> 來動態選擇 flex 的排版方式。