Detailed explanation of using CSS justify-content:flex-end
Detailed Explanation of CSS justify-content:flex-end
CSS’s flexbox layout is a new layout mode that allows for quick and easy arrangement and alignment of page elements. The justify-content property is used to set alignment along the main axis. This article will introduce the usage of justify-content:flex-end and provide examples.
Basic Syntax
justify-content‘s basic syntax is as follows:
.container {
display: flex;
justify-content: flex-end;
}
Where container is the container containing the elements to be arranged. display:flex specifies a flexbox layout. justify-content:flex-end specifies bottom alignment along the main axis.
Example
Here is an example of using justify-content:flex-end to achieve bottom alignment:
<div class="container">
<div class="item red">1</div>
<div class="item green">2</div>
<div class="item blue">3</div>
</div>
.container {
display: flex;
justify-content: flex-end;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
font-size: 36px;
text-align: center;
line-height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
As you can see, the three blocks are arranged from right to left in the container and are bottom-aligned.
Complete Example
Here’s a more complete example using justify-content:flex-end to achieve bottom alignment, including the HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>CSS Detailed explanation of the use of justify-content:flex-end</title>
<style>
.container {
display: flex;
justify-content: flex-end;
align-items: center;
height: 200px;
border: 1px solid black;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
font-size: 36px;
text-align: center;
line-height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="item red">1</div>
<div class="item green">2</div>
<div class="item blue">3</div>
</div>
<script>
let container = document.querySelector(".container");
let intervalID = setInterval(() => {
const time = new Date();
const seconds = time.getSeconds();
container.style.height = (200 - (seconds % 10) * 10) + "px";
}, 1000);
</script>
</body>
</html>
As you can see, in addition to the HTML and CSS code, a JavaScript snippet is also included to dynamically modify the container’s height.
Conclusion
Using justify-content:flex-end can achieve bottom alignment along the main axis. This article also provides a complete example, including JavaScript code to dynamically modify the container’s height. After this introduction, I believe readers have mastered the usage of justify-content:flex-end and its related application scenarios.