資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究避免使用 CSS 包裹彈性專案
在 Flexbox 佈局概念釋出之前，大多數開發人員和設計師都採用了各種方法來建立響應式和靈活的佈局。這些方法包括表格和浮動。儘管仍然可以使用這些方法，但現在大多數設計師都使用 Flexbox 模型。
使用者可以使用CSS Flexbox垂直或水平排列和組織其網頁，從而建立視覺吸引力強且易於導航的網站。Flexbox 實際上是一個 CSS 佈局模組，而不僅僅是一個屬性。在本文中，我們將學習如何避免使用 CSS 包裹彈性專案，這可以透過將 flex-wrap 屬性與nowrap 值一起使用來避免彈性專案換行來實現。
CSS flex-wrap 屬性
您可以使用CSS flex-wrap 屬性控制彈性元素是在多行上換行還是在單行上顯示。透過 flex-wrap 屬性可以調整行的堆疊方向。它用於為包含在彈性容器中的彈性專案指定單行或多行格式。
語法
以下是 CSS flex-wrap 屬性的語法：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
示例
讓我們看下面的示例，我們將使用 flex-wrap 屬性和 no wrap 值來避免換行。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #EAFAF1;
font-family: verdana;
}
section {
width: 170px;
display: flex;
flex-wrap: nowrap;
background-color: #F9E79F;
margin: 200px;
padding: 8px;
}
div {
background-color: #CCD1D1;
color: #DE3163;
margin: 6px;
padding: 9px;
border-radius: 10px;
}
</style>
</head>
<body>
<section>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</section>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，其中包含在網頁上顯示的未使用換行的 div 框。
示例
考慮另一種情況，我們將使用 flex-wrap 屬性和 no wrap 值來避免換行。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
height: 250px;
font: 50px/100px verdana;
text-align: center;
color: #DE3163;
display: flex;
flex-wrap: no wrap;
}
.tp div {
height: 60%;
width: 60%;
}
.x {
background: #E8DAEF;
}
.x1 {
background: #D6EAF8;
}
.x2 {
background: #D5F5E3;
}
</style>
</head>
<body>
<div class="tp">
<div class="x">A</div>
<div class="x1">B</div>
<div class="x2">C</div>
</div>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，顯示在網頁上顯示的應用了 no wrap 的 div 框。
更新於：2024年1月8日
3K+ 閱讀量
廣告