CSS justify-content

admin發表於2019-04-11
CSS

關於彈性佈局更多內容可以參閱display:flex 彈性佈局一章節。

本文將分步通過程式碼例項詳細介紹一下justify-content屬性的用法。

一.相關知識準備：

通過display:flex可以將元素設定為彈性佈局容器元素。

容器元素具有兩個軸線，預設狀態下，水平的是主軸，垂直的是交叉軸。

如果專案的尺寸小於容器的尺寸，那麼在主軸方向就會有剩餘空間。

二.justify-content屬性：

此屬性應用於容器元素，這一點特別重要。

它用於規定容器元素中的專案如何去分配主軸方向專案之間與以及周圍的空間。

語法結構：

[CSS] 純文字檢視 複製程式碼
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

屬性值解析：

（1）.flex-start：預設值，規定專案位於容器主軸的起始位置。

（2）.flex-end：規定專案位於容器主軸的結束位置。

（3）.center：規定專案位於容器主軸的中間。

（4）.space-between：規定專案在主軸的兩端對齊。

（5）.space-around：規定容器中專案兩側都保留相等的空間。

（6）.initial：F專案預設方式顯示，可以參閱CSS initial 屬性一章節。

（7）.inherit：從父元素繼承該屬性。

特別說明：此屬性必須應用於彈性佈局容器元素，否則設定此屬性無效。

瀏覽器相容：

（1）.IE10+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.safria瀏覽器不支援此屬性。

上面對justify-content屬性進行了理論上的闡述，可能很多朋友還是一頭霧水。

這很正常，理論畢竟總有一種朦朧感，下面結合程式碼例項對屬性值進行逐一演示。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:flex-start; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174039jw4zhhu1pk1p4wwm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對上述程式碼進行一下詳細解析：

（1）.外層div元素應用了display: flex，所以它被用作彈性佈局容器元素。

（2）.容器元素的justify-content屬性值為flex-start，也就是規定專案以容器主軸起始位置對齊。

（3）.也就是規定專案在容器主軸上左對齊，因為容器的左側是主軸的起始位置。

（3）.flex-start是預設屬性值，可以省略。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:flex-end; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174104brdi8ihvmvoo6ffa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分析如下：

（1）.外層div元素應用了display: flex，所以它被用作彈性佈局容器元素。

（2）.容器元素的justify-content屬性值為flex-end，也就是規定專案以容器主軸結束位置對齊。

（3）.也就是規定專案在容器主軸上右對齊，因為右側是結束位置。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:center; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174133w517fwnh8uz5wovv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分析如下：

（1）.外層div元素應用了display: flex，所以它被用作彈性佈局容器元素。

（2）.容器元素的justify-content屬性值為center，也就是規定專案以容器主軸居中對齊。

（3）.也就是規定專案在容器主軸上居中對齊。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:space-between; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174202frk67y33bfey5yqf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分析如下：

（1）.外層div元素應用了display: flex，所以它被用作彈性佈局容器元素。

（2）.容器元素的justify-content屬性值為space-between，也就是規定專案以容器主軸兩端對齊。

（3）.也就是規定專案在容器主軸上兩端對齊，兩側緊貼主軸的起始位置與結束位置，專案之間間隔相同。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:space-around; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body> 
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174229vk7puq9ekqku6clh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分析如下：

（1）.外層div元素應用了display: flex，所以它被用作彈性佈局容器元素。

（2）.容器元素的justify-content屬性值為space-around，可能此屬性值會稍稍給一些朋友帶來困擾。

（3）.給每一個專案主軸方向的兩側指定一個空間，於是專案之間的間隔比專案與容器邊緣的間隔大一倍。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 200px;
  height: 350px;
  background:#ccc;
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174257v3r46ra334v2aswj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼的目的就是為了提醒讀者，不要想當然的認為主軸必須是水平的。

通過flex-direction屬性可以改變主軸的方向，上述程式碼中主軸是垂直的。

所以專案在垂直方向兩端對齊，這一點要特別注意一下。

相關文章