位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS3 對父級容器的設(shè)置 1.flex-direction

提問人:劉團(tuán)圓發(fā)布時間:2020-11-19

flex-direction屬性規(guī)定靈活項目的方向,CSS語法如下:

flex-direction: row|row-reverse|column|column-reverse|initial|inherit:

flex-direction屬性的值可以是以下幾種:

?row:默認(rèn)值,靈活的項目將水平顯示,正如一個行一樣。

?row-reverse:與row相同,但是以相反的順序。

?column:靈活的項目將垂直顯示,正如一個列一樣。

?column-reverse:與column相同,但是以相反的順序。

?initial:設(shè)置該屬性為它的默認(rèn)值。

?inherit:從父元素繼承該屬性。

通過實(shí)例來理解此屬性。

【例題】使用flex-direction屬性

代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.container{

width: 1200px;

/*height: 200px;*/

border:5px red solid;

display:flex;

flex-direction: row-reverse;

flex-direction: column-reverse;

}

.content{

width: 100px;

height: 100px;

background: lightpink;

color:#fff;

font-size: 50px;

text-align: center;

line-height: 100px;

}

</style>

</head>

<body>

<div>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

</div>

</body>

</html>

image.png

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部