CSS - place-content 属性

上一页
下一页

CSS place-content 是一个简写属性，它同时对齐块（列）和内联（行）轴上的内容。它用于在单个声明中设置 align-content 和 justify-content 属性。

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

可能的值

start − 项目在相应轴上与容器的起始边缘对齐。

end − 项目在相应轴上与容器的末端边缘对齐。

flex-start - 对齐 flex 容器开头的项目。

flex-end − 对齐 flex 容器末端的项。

center − 将物品对齐在柔性容器的中心。

left − 将项目与对齐容器的左侧对齐。如果属性的轴不平行于内联轴，则此值的作用类似于 start。

right − 将项目与对齐容器的右边缘对齐，并沿适当的轴对齐。如果属性的轴不平行于内联轴，则此值的作用类似于 start。

space-between − 对齐容器中的项均匀分布，相邻项之间的间距相等，第一个和最后一个项与主开始和主端边缘对齐。

baseline, first baseline, last baseline −

  • 这些值指定在内容对齐过程中第一次或最后一次基线对齐的参与。
  • 第一个和最后一个基线是基线的同义词。First 和 last 是指 flex 项中的行框。
  • start 是第一基线的回退对齐，结束是最后一基线e 的回退对齐。

space-around - 对齐容器中的项目均匀分布。每对相邻元素在第一个和最后一个项目之前具有相同的间距，是相邻项目之间距离的一半。

space-evenly- 对齐容器中的项目均匀分布，相邻项目之间以及 main-start 和 main-end 的间距相等。

stretch − 如果沿主轴的项目总大小小于对齐容器，则自动调整大小的项目将相等地增加其大小以填充容器，同时遵守最大高度/最大宽度约束。

safe - 与对齐关键字一起使用，当项目溢出容器时，导致任何数据丢失，将对齐方式根据起始值设置。

unsafe - 与对齐关键字一起使用，即使项目溢出容器，导致任何数据丢失，也会遵守传递的对齐值。

适用于

多线柔性集装箱。

语法

位置对准


place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

基线对齐


place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

分布式对齐


place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

第一个属性值是 align-content，第二个属性值是 justify-content。

如果缺少第二个值，则只要第一个值有效，它就对两者都使用。如果对两者都无效，则整个值无效。

CSS place-content - 居中开始值

以下示例演示了属性 place-content： center start 将 flex 项水平对准中心，垂直对准容器的顶部 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: center start;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - 开始中心值

以下示例演示了属性 place-content： start center 沿容器的左边缘水平和对齐 flex 项在容器的中心水平和垂直对齐 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: start center;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - 结束权利值

以下示例演示了属性 place-content： end right 将 flex 项水平对齐到右边缘，垂直对齐下边缘 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: end right;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - flex-start center 值

以下示例演示了属性 place-content： flex-start center 将 flex 项水平对准左边缘，垂直对准容器的中心 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: flex-start center;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - flex-end center 值

以下示例演示了属性 place-content： flex-end center 将 flex 项水平对准右端，垂直对准容器的中心 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: flex-end center;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - 最后基线值

以下示例演示了属性 place-content： last baseline property 最后一行项与该行上最高项的基线对齐 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: last baseline;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - 值之间的空格

以下示例演示了属性 place-content： space-between 属性在 flex 容器内的 flex 项之间均匀分配空间 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: space-between;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - 空格值

以下示例演示了属性 place-content：space-around property 均匀地分配了 flex 容器内的 flex 项周围的空间 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: space-around;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

CSS place-content - space-evenly 值

以下示例演示了属性 place-content： space-evenly property 均匀地分配空间，均匀地（在和周围）flex 容器内的 flex 项 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 background-color: red;
	 	 	 height: 300px;
	 	 	 border: 2px solid black;
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 place-content: space-around;
	 	}
	 	.flex-container > div {
	 	 	 flex-basis: 100px;
	 	 	 height: 50px;
	 	 	 margin: 5px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	 	 <div>Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	 	 <div>Flex item 7</div>
	 	</div>
</body>
</html>

 

打印本页
上一页
下一页