CSS - place-items 属性

上一页
下一页

CSS place-items 是 CSS Grid Layout 中使用的一个速记属性，用于在单个声明中设置 align-items 和 justify-items属性。它允许您同时沿块（列）和内联（行）轴对齐和对齐网格容器中的网格项

此属性是以下 CSS 属性的简写：

可能的值

  • 单个 align-items 值在块方向和内联方向上对齐。
  • align-items 值设置块方向对齐方式，后跟 justify-items，后者指定内联对齐方式。

适用于

所有元素。

语法

关键字值


place-items: center;
place-items: normal start;

位置对准


place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;

基线对齐


place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

CSS place-items - 将项目放置在网格容器中

以下示例演示了 place-items 属性在网格布局中的不同行为 -


<html>
<head>
<style>
	 	div > div {
	 	 	 box-sizing: border-box;
	 	 	 border: 2px solid blue;
	 	}
	 	.row {
	 	 	 margin-bottom: 20px;
	 	}
	 	select {
	 	 	 padding: 2px;
	 	 	 background-color: yellow;
	 	 	 border-radius: 10px;
	 	 	 color: blue;
	 	}
	 	#grid-container {
	 	 	 height: 400px;
	 	 	 width: 350px;
	 	 	 place-items: start;
	 	 	 background-color: red;
	 	 	 display: grid;
	 	 	 grid-template-columns: repeat(3, 100px);
	 	}
	 	#grid-container > div {
	 	 	 width: 60px;
	 	 	 min-height: 60px;
	 	 	 padding: 5px;
	 	 	 margin: 5px;
	 	}
	 	.gridItem1 {
	 	 	 background-color: greenyellow;
	 	}
	 	.gridItem2 {
	 	 	 background-color: violet;
	 	}
</style>
</head>
<body>
	 	<div class="row">
	 	 	 <label for="place-items-values">place-items: </label>
	 	 	 <select id="place-items-values">
	 	 	 	 	<option value="start">start</option>
	 	 	 	 	<option value="center">center</option>
	 	 	 	 	<option value="end">end</option>
	 	 	 	 	<option value="stretch">stretch</option>
	 	 	 	 	<option value="center normal">center normal</option>
	 	 	 	 	<option value="normal start">normal start</option>
	 	 	 	 	<option value="center normal">center normal</option>
	 	 	 	 	<option value="start legacy">start legacy</option>
	 	 	 	 	<option value="end normal">end normal</option>
	 	 	 	 	<option value="self-start legacy">self-start legacy</option>
	 	 	 	 	<option value="self-end normal">self-end normal</option>
	 	 	 	 	<option value="flex-start legacy">flex-start legacy</option>
	 	 	 	 	<option value="flex-end normal">flex-end normal</option>
	 	 	 	 	<option value="baseline">baseline</option>
	 	 	 	 	<option value="first baseline legacy">first baseline legacy</option>
	 	 	 	 	<option value="last baseline">last baseline</option>
	 	 	 	 	<option value="stretch legacy">stretch legacy</option>
	 	 	 </select>
	 	</div>
	 	<div id="grid-container">
	 	 	 <div class="gridItem1">Grid Item 1</div>
	 	 	 <div class="gridItem2">Grid Item 2</div>
	 	 	 <div class="gridItem1">Grid Item 3</div>
	 	 	 <div class="gridItem2">Grid Item 4</div>
	 	 	 <div class="gridItem1">Grid Item 5</div>
	 	</div>

	 	<script>
	 	 	 	 	const values = document.getElementById("place-items-values");
	 	 	 const container = document.getElementById("grid-container");

	 	 	 values.addEventListener("change", () => {
	 	 	 	 	container.style.placeItems = values.value;
	 	 	 });
	 	</script> 		
</body>
</html>

CSS place-items - 将项目放置在 Flex 容器中

以下示例演示了 flex 布局中 place-items 属性的不同行为 -


<html>
<head>
<style>
	 	div > div {
	 	 	 box-sizing: border-box;
	 	 	 border: 2px solid blue;
	 	 	 display: flex;
	 	}
	 	.row {
	 	 	 margin-bottom: 20px;
	 	}
	 	select {
	 	 	 padding: 2px;
	 	 	 background-color: yellow;
	 	 	 border-radius: 10px;
	 	 	 color: blue;
	 	}
	 	#flex-container {
	 	 	 height: 350px;
	 	 	 width: 350px;
	 	 	 align-items: start;
	 	 	 background-color: red;
	 	 	 display: flex;	
	 	 	 flex-wrap: wrap; 	 	 		
	 	}
	 	#flex-container > div {
	 	 	 width: 60px;
	 	 	 min-height: 60px;
	 	 	 padding: 5px;
	 	 	 margin: 5px;
	 	}
	 	.flexItem1 {
	 	 	 background-color: greenyellow;
	 	}
	 	.flexItem2 {
	 	 	 background-color: violet;
	 	}
</style>
</head>
<body>
	 	<div class="row">
	 	 	 <label for="place-items-values">place-items: </label>
	 	 	 <select id="place-items-values">
	 	 	 	 	<option value="start">start</option>
	 	 	 	 	<option value="center">center</option>
	 	 	 	 	<option value="end">end</option>
	 	 	 	 	<option value="stretch">stretch</option>
	 	 	 	 	<option value="center normal">center normal</option>
	 	 	 	 	<option value="normal start">normal start</option>
	 	 	 	 	<option value="center normal">center normal</option>
	 	 	 	 	<option value="start legacy">start legacy</option>
	 	 	 	 	<option value="end normal">end normal</option>
	 	 	 	 	<option value="self-start legacy">self-start legacy</option>
	 	 	 	 	<option value="self-end normal">self-end normal</option>
	 	 	 	 	<option value="flex-start legacy">flex-start legacy</option>
	 	 	 	 	<option value="flex-end normal">flex-end normal</option>
	 	 	 	 	<option value="baseline">baseline</option>
	 	 	 	 	<option value="first baseline legacy">first baseline legacy</option>
	 	 	 	 	<option value="last baseline">last baseline</option>
	 	 	 	 	<option value="stretch legacy">stretch legacy</option>
	 	 	 </select>
	 	</div>

	 	<div id="flex-container">
	 	 	 <div class="flexItem1">Flex Item 1</div>
	 	 	 <div class="flexItem2">Flex Item 2</div>
	 	 	 <div class="flexItem1">Flex Item 3</div>
	 	 	 <div class="flexItem2">Flex Item 4</div>
	 	 	 <div class="flexItem1">Flex Item 5</div>
	 	 	 <div class="flexItem2">Flex Item 6</div>
	 	 	 <div class="flexItem1">Flex Item 7</div>
	 	</div>
	 	<script>
	 	 	 const values = document.getElementById("place-items-values");
	 	 	 const container = document.getElementById("flex-container");

	 	 	 values.addEventListener("change", () => {
	 	 	 	 	container.style.placeItems = values.value;
	 	 	 });
	 	</script> 		
</body>
</html>
打印本页
上一页
下一页