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

CSS3 對父級(jí)容器的設(shè)置 2.justify-content

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

    內(nèi)容對齊justify-content屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis)對齊，語法如下：

    justify-content: flex- start | flex- end | center [ space-between | space- around


    justify-content屬性的值可以是以下幾種：

    ?flex-start：默認(rèn)值，頂目位于容器的開頭。彈性頊目向行頭緊挨著填充。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。

    ?flex-end：項(xiàng)目位于容器的結(jié)尾。彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。

    ?center：項(xiàng)目位于容器的中心。彈性項(xiàng)目居中緊挨著填充。如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出。

    ?space-between：項(xiàng)目位于各行之間留有空白的容器內(nèi)。彈性項(xiàng)目平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于flex-sta「t。否則，第一個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對齊，而最后一個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對齊，然后剩余的 彈性項(xiàng)分布在該行上，相鄰頂目的間隔相等。

    ?space-around：項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center。否則，彈性項(xiàng)目沿該行分布，且彼此間隔相等（如20px ),同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（ 1/2*20px=10px )。

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

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

    下面通過實(shí)例來理解justify-content屬性各個(gè)值的區(qū)別。

    【例題】使用justify-content屬性

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.container{

width: 1200px;

height: 800px;

border:5px red solid;

display:flex;

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

}

.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)
返回頂部