css中justify-content屬性的使用方法

發(fā)布時間：2020-09-24 14:48:13 來源：億速云閱讀：198 作者：小新欄目：web開發(fā)

css中justify-content屬性的使用方法？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

css justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，對齊方式有：位于容器的開頭、位于容器的結(jié)尾、位于容器的中心、均勻分布等等。

css justify-content屬性怎么用？

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式?？梢允褂?align-content 屬性對齊交叉軸上的各項（垂直）。

語法：

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

屬性值：

●　flex-start：默認值。項目位于容器的開頭。

css中justify-content屬性的使用方法

●　flex-end：項目位于容器的結(jié)尾。

css中justify-content屬性的使用方法

●　center：項目位于容器的中心。

css中justify-content屬性的使用方法

●　space-between：項目位于各行之間留有空白的容器內(nèi)，即均勻分布在線上; 第一項是在起始行，最后一項是在結(jié)束行。

css中justify-content屬性的使用方法

●　space-around：項目位于各行之前、之間、之后都留有空白的容器內(nèi)。

css中justify-content屬性的使用方法

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

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

css justify-content屬性示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.flex-start { 
  justify-content: flex-start; 
}
.flex-end { 
  justify-content: flex-end; 
}  
.flex-end li {
  background: gold;
}
.center { 
  justify-content: center; 
}  
.center li {
  background: deepskyblue;
}
.space-between { 
  justify-content: space-between; 
}  
.space-between li {
  background: lightgreen;
}
.space-around { 
  justify-content: space-around; 
}
.space-around li {
  background: hotpink; 
}
.space-evenly { 
  justify-content: space-evenly; 
}
.space-evenly li {
  background: #bada55; 
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
</style>
</head>
<body>
<ul class="flex-container flex-start">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
<ul class="flex-container flex-end">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
<ul class="flex-container center">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
<ul class="flex-container space-between">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
<ul class="flex-container space-around">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
<ul class="flex-container space-evenly">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
</body>
</html>

效果圖：

css中justify-content屬性的使用方法

說明：

紅色列表是justify-content屬性設(shè)置為 flex-start

黃色是justify-content屬性設(shè)置為 flex-end

藍色是justify-content屬性設(shè)置為 center

綠色是justify-content屬性設(shè)置為 space-between

粉紅色是justify-content屬性設(shè)置為 space-around

淺綠色是justify-content屬性設(shè)置為 space-evenly

感謝各位的閱讀！看完上述內(nèi)容，你們對css中justify-content屬性的使用方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

css中justify-content屬性的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽