資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 JavaScript 設定彈性專案是否換行？
在本教程中，我們將瞭解如何使用 JavaScript 設定彈性專案的換行方式。
我們可以使用 JavaScript 中的 `flex-wrap` 屬性來設定專案的換行值。
讓我們簡要了解一下。
使用 `flex-wrap` 屬性
`flex-wrap` 屬性定義了是否在容器元素內換行專案。要使 `flex-wrap` 屬性生效，專案必須是彈性的。預設值為 `nowrap`。
使用者可以按照以下語法使用 `flex-wrap` 屬性。
語法
object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"
以上語法將 `flex-wrap` 值設定為專案的樣式。
值
nowrap − 指定專案不換行。因此，專案顯示在單行中。
wrap − 指定如果專案溢位則換行。因此，專案顯示在多行中。
wrap-reverse − 指定如果專案溢位則按反序換行。因此，專案以反序顯示在多行中。
initial − 將此屬性設定為其預設值。
inherit − 從父元素繼承此屬性。
返回值
返回值是一個字串，表示 `flex-wrap` 屬性。
示例 1
在這個程式中，我們有兩個彈性容器元素。五個專案是每個容器的子元素。當用戶點選按鈕時，我們呼叫函式使用上面給出的 `flex-wrap` 屬性語法將 `flex-wrap` 值設定為所有專案。第一個容器根據 DOM 順序在多行中換行元素，因為 `flex-wrap` 值為“wrap”。第二個容器顯示單行專案，因為 `flex-wrap` 值為“nowrap”。
<html> <head> <style> #flxWrpCont1, #flxWrpCont2 { width: 90px; height: 90px; border: 1px solid black; display: flex; } #flxWrpEl { width: 30px; height: 30px; } #flxWrpCont1 div:nth-child(odd) { background-color: skyblue; } #flxWrpCont2 div:nth-child(odd) { background-color: grey; } </style> </head> <body> <h2> Setting the item wrap value to the elements using the <i> flexWrap property </i> </h2> <br> <br> <b> Wrap </b> <br> <br> <div id="flxWrpCont1"> <div id="flxWrpEl"> 1 </div> <div id="flxWrpEl"> 2 </div> <div id="flxWrpEl"> 3 </div> <div id="flxWrpEl"> 4 </div> <div id="flxWrpEl"> 5 </div> </div> <br> <br> <b> No Wrap </b> <br> <br> <div id="flxWrpCont2"> <div id="flxWrpEl"> 1 </div> <div id="flxWrpEl"> 2 </div> <div id="flxWrpEl"> 3 </div> <div id="flxWrpEl"> 4 </div> <div id="flxWrpEl"> 5 </div> </div> <br> <br> <div id="flxWrpWrap"> <button onclick="setflexWrap()"> Set </button> </div> <script> function setflexWrap() { var flxWrpWrap = document.getElementById("flxWrpWrap"); flxWrpWrap.style.display = "none"; var flxWrpCont1 = document.getElementById("flxWrpCont1"); var flxWrpCont2 = document.getElementById("flxWrpCont2"); flxWrpCont1.style.flexWrap = "wrap"; flxWrpCont2.style.flexWrap = "nowrap"; } </script> </body> </html>
示例 2
在這個程式中，我們在容器內有七個專案。當用戶點選按鈕時，我們呼叫函式將 `flex-wrap` 值設定為這些專案。
專案按反序換行，因為 `flex-wrap` 值為“wrap-reverse”。“VIB”-“GYO”-“R”順序在反向行順序中更改為“R”-“GYO”-“VIB”。
<html> <head> <style> #flxWrpRevCont { width: 300px; height: 300px; border: 1px solid black; display: flex; } #flxWrpRevEl { width: 100px; height: 100px; color: #ffff; } #flxWrpRevEl:nth-child(1) { background-color: violet; } #flxWrpRevEl:nth-child(2) { background-color: indigo; } #flxWrpRevEl:nth-child(3) { background-color: blue; } #flxWrpRevEl:nth-child(4) { background-color: green; } #flxWrpRevEl:nth-child(5) { background-color: yellow; color: #000000; } #flxWrpRevEl:nth-child(6) { background-color: orange; } #flxWrpRevEl:nth-child(7) { background-color: red; } </style> </head> <body> <h2> Setting the item to wrap reverse value to the elements using the <i> flexWrap property </i> </h2> <br> <br> <div id="flxWrpRevCont"> <div id="flxWrpRevEl"> V </div> <div id="flxWrpRevEl"> I </div> <div id="flxWrpRevEl"> B </div> <div id="flxWrpRevEl"> G </div> <div id="flxWrpRevEl"> Y </div> <div id="flxWrpRevEl"> O </div> <div id="flxWrpRevEl"> R </div> </div> <br> <br> <div id="flxWrpRevWrap"> <button onclick="setflexRevWrap()"> Reverse </button> </div> <script> function setflexRevWrap() { var flxWrpRevWrap = document.getElementById("flxWrpRevWrap"); //flxWrpRevWrap.style.display = "none"; var flxWrpRevCont = document.getElementById("flxWrpRevCont"); flxWrpRevCont.style.flexWrap = "wrap-reverse"; } </script> </body> </html>
本教程講解了如何使用 `flex-wrap` 屬性設定專案的換行值。這在多列布局中非常有用，可以按順序或反序換行元素。
113 次瀏覽
