當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

CSS flex-flow屬性用法及代碼示例

此 CSS 屬性是 flex-direction 和 flex-wrap 屬性的簡寫。它隻對 flex-items 起作用，所以如果容器的物品不是 flex-item，則 flex-flow 屬性不會影響對應的物品。

用法

flex-flow:flex-direction flex-wrap | initial | inherit;

flex-flow 屬性的默認值是 row nowrap，它是 flex-direction(即行)和 flex-wrap(即 nowrap)屬性的默認值的串聯。

此 CSS 屬性的可能值列表如下：

值 描述
flex-direction flex-direction 屬性用於設置彈性容器內彈性項目的方向。它的默認值是行(從左到右，從上到下)。此屬性的可能值為 row、row-reverse、column 和 column-reverse。
flex-wrap flex-wrap 屬性指定 flex-items 是否應該換行，以防它們在一條伸縮線上沒有足夠的空間。它的默認值是 nowrap。此屬性的可能值為 nowrap、wrap 和 wrap-reverse。
initial 它將屬性設置為其默認值。
inherit 它從其父元素繼承屬性。

示例

在這裏，我們使用 flex-wrap 屬性的環繞值和 flex-direction 屬性的所有可能值，即行、row-reverse、列和 column-reverse。

在第一個容器中，我們應用 flex-flow:row nowrap;對於 flex-items，在第二個容器中，我們應用 flex-flow:row-reverse nowrap；對於 flex-items，在第三個容器中，我們應用 flex-flow:column nowrap；到 flex-items，在第四個容器中，我們應用 flex-flow:column-reverse nowrap；到 flex-items。

<!DOCTYPE html>
<html>
<head>
<title>flex-flow property</title>
<style>
.mainrow{
width:400px;
height:50px;
border:5px solid red;
}
.maincol{
width:100px;
height:200px;
border:5px solid red;
}
#row {
flex-flow:row nowrap;
}
#rowrev {
flex-flow:row-reverse nowrap;
}
#col {
flex-flow:column nowrap;
}
#colrev {
flex-flow:column-reverse nowrap;
}
div {
width:100px;
height:50px;
display:flex;
font-size:20px;
}

</style>
</head>

<body>
<center>
<h2>  flex-flow:row nowrap;</h2>
<div id= "row" class = "mainrow">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:row-reverse nowrap;</h2>
<div id= "rowrev" class = "mainrow" >
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:column nowrap;</h2>
<div id="col" class = "maincol">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:column-reverse nowrap;</h2>
<div id="colrev" class = "maincol">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
</center>
</body>
</html>

輸出

CSS flex-flow property

示例

與上述示例類似，這裏我們使用 flex-wrap 屬性的環繞值和 flex-direction 屬性的所有可能值，即行、row-reverse、列和 column-reverse。

在第一個容器中，我們應用 flex-flow:row wrap；對於 flex-items，在第二個容器中，我們應用 flex-flow:row-reverse 包裝；對於 flex-items，在第三個容器中，我們應用 flex-flow:column wrap；到 flex-items，在第四個容器中，我們應用 flex-flow:column-reverse 包裝；到 flex-items。

<!DOCTYPE html>
<html>
<head>
<title>flex-flow property</title>
<style>
.mainrow{
width:200px;
height:100px;
border:5px solid red;
}
.maincol{
width:200px;
height:150px;
text-align:left;
border:5px solid red;
}
#row {
flex-flow:row wrap;
}
#rowrev {
flex-flow:row-reverse wrap;
}
#col {
flex-flow:column wrap;
}
#colrev {
flex-flow:column-reverse wrap;
}
div {
width:100px;
height:50px;
display:flex;
font-size:20px;
font-weight:bold;
}

</style>
</head>

<body>
<center>
<h2>  flex-flow:row wrap;</h2>
<div id= "row" class = "mainrow">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:row-reverse wrap;</h2>
<div id= "rowrev" class = "mainrow" >
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:column wrap;</h2>
<div id="col" class = "maincol">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:column-reverse wrap;</h2>
<div id="colrev" class = "maincol">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
</center>
</body>
</html>

輸出

CSS flex-flow property

示例

這裏我們使用 flex-wrap 屬性的 wrap-reverse 值以及 flex-direction 屬性的所有可能值，即行、row-reverse、列和 column-reverse。

<!DOCTYPE html>
<html>
<head>
<title>flex-flow property</title>
<style>
.mainrow{
width:200px;
height:100px;
border:5px solid red;
}
.maincol{
width:200px;
height:150px;
text-align:left;
border:5px solid red;
}
#row {
flex-flow:row wrap-reverse;
}
#rowrev {
flex-flow:row-reverse wrap-reverse;
}
#col {
flex-flow:column wrap-reverse;
}
#colrev {
flex-flow:column-reverse wrap-reverse;
}
div {
width:100px;
height:50px;
display:flex;
font-size:20px;
font-weight:bold;
}

</style>
</head>

<body>
<center>
<h2>  flex-flow:row wrap-reverse;</h2>
<div id= "row" class = "mainrow">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:row-reverse wrap-reverse;</h2>
<div id= "rowrev" class = "mainrow" >
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:column wrap-reverse;</h2>
<div id="col" class = "maincol">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
<h2>  flex-flow:column-reverse wrap-reverse;</h2>
<div id="colrev" class = "maincol">
<div style="background-color:lightblue;"> 1 </div>
<div style="background-color:pink;"> 2 </div>
<div style="background-color:lightgreen"> 3 </div>
<div style="background-color:yellow;"> 4 </div>
</div>
</center>
</body>
</html>

輸出

CSS flex-flow property



相關用法


注：本文由純淨天空篩選整理自 CSS flex-flow property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。