資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 設定彈性專案是否應該換行？
在本教程中，讓我們瞭解一下如何使用 JavaScript 設定彈性專案是否應該換行。
我們可以使用 JavaScript 中的 flex-wrap 屬性來設定專案的換行值。
讓我們簡要了解一下。
使用 Style 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 順序在多行中換行元素，因為 'wrap' 是 flex-wrap 值。第二個容器在一行中顯示專案，因為 "nowrap" 是 flex-wrap 值。
<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 值設定為這些專案。
專案以相反的順序換行，因為 'wrap-reverse' 是 flex-wrap 值。'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 次檢視
