একটি ফ্লেক্স কন্টেইনারের আইটেমগুলো এর মেইন অক্ষ অনুযায়ী স্পেস বিতরণ করে অ্যালাইন করতে, আমরা CSS-এর justify-content প্রপার্টি ব্যবহার করি।
সিনট্যাক্স
CSS justify-content প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো:
Selector { display: flex; justify-content: /*value*/ }উদাহরণ
নিচের উদাহরণগুলো CSS justify-content প্রপার্টি ব্যাখ্যা করে।
<!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>এটি নিচের আউটপুট দেয়:
