একটি ফ্লেক্স কন্টেইনারের আইটেমগুলির চারপাশে স্থান বন্টন করে তার প্রধান অক্ষ বরাবর সারিবদ্ধ করতে, আমরা CSS-এর ন্যায্যতা-সামগ্রী বৈশিষ্ট্য ব্যবহার করি।
সিনট্যাক্স
CSS জাস্টিফাই-কন্টেন্ট প্রপার্টির সিনট্যাক্স নিম্নরূপ -
Selector {
display: flex;
justify-content: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি CSS ন্যায্যতা-সামগ্রী বৈশিষ্ট্যকে চিত্রিত করে।
<!DOCTYPE html>
<html>
<head>
<style>
#root {
margin: 5%;
display: flex;
justify-content: space-between;
}
#one {
float:left;
box-shadow: inset 0 0 34px #b798e1;
}
#two {
box-shadow: inset 0 0 34px #236fa0;
}
#three {
box-shadow: inset 0 0 34px #43946a;
}
.element {
padding: 7%;
border-radius: 15%;
}
</style>
</head>
<body>
<div id="root">
<div class="element" id="one">1</div>
<div class="element" id="two">2</div>
<div class="element" id="three">3</div>
</div>
</body>
</html> এটি নিম্নলিখিত আউটপুট দেয়
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#root {
margin: 5%;
padding: 2%;
display: flex;
justify-content: space-evenly;
box-shadow: inset 0 10px 40px magenta;
font-weight: bold;
}
div > div {
padding: 2%;
border-radius: 15%;
}
div:nth-of-type(even) {
box-shadow: inset 2px 2px 20px orange;
}
div > div:nth-of-type(odd) {
box-shadow: inset 2px 2px 20px lightblue;
}
</style>
</head>
<body>
<div id="root">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html> এটি নিম্নলিখিত আউটপুট দেয়
