极客教程如何使用JavaScript对flex容器中的项目进行对齐
在CSS中， align-items 属性用于对齐flex容器中的元素。可以通过使用选择器方法选择特定的元素，然后使用 alignItems 属性来设置对齐方式来实现类似的效果。在需要动态设置容器中项目的对齐方式时，这是非常有用的。
语法：
document.getElementById("elementId")
.style.alignItems="flex-start | flex-end | center"
以下示例演示如何使用JavaScript对齐项。
示例 1： 在此示例中，项目将与容器的起始位置对齐。
<!DOCTYPE html>
<html>
<head>
<style>
#flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
height: 250px;
}
#flex-container>div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div id="flex-container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<button onclick="align()">Align</button>
<script>
function align() {
// Set the required alignment
document.getElementById("flex-container")
.style.alignItems = "flex-start";
}
</script>
</body>
</html>
输出：
示例2： 在这个示例中，项目将对容器的末尾对齐。
<!DOCTYPE html>
<html>
<head>
<style>
#flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
height: 250px;
}
#flex-container>div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div id="flex-container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<button onclick="align()">Align</button>
<script>
function align() {
// Set the required alignment
document.getElementById("flex-container")
.style.alignItems = "flex-end";
}
</script>
</body>
</html>
输出：
示例3： 在这个示例中，项目将居中对齐于容器。
<!DOCTYPE html>
<html>
<head>
<style>
#flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
height: 250px;
}
#flex-container>div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div id="flex-container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<button onclick="align()">Align</button>
<script>
function align() {
// Set the required alignment
document.getElementById("flex-container")
.style.alignItems = "center";
}
</script>
</body>
</html>
输出：
