সিএসএস align-content প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Internet Explorer | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| align-content: | ২১.০ | ২১.০ | ১২.০ | ১১.০ | ৯.০ | ১২.১ |
সংজ্ঞা ও ব্যবহার
align-content প্রোপার্টি flex-wrap প্রোপার্টির আচরণ পরিবর্তন করে। এটি align-items এর মতই । কিন্তু flex আইটেম এর পরিবর্তে flex লাইন সাজায় ।
পরামর্শঃ
- প্রধান- অক্ষে(আনুভূ্মিক) আইটেম সাজাতে justify-content প্রোপার্টি ব্যবহার করুন।
- যেকোনো ইফেক্ট এর জন্য এই প্রোপার্টির আইটেমে একাধিক লাইন হতে হবে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| strech | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
align-content: stretch/center/flex-start/flex-end/space-between/space-around/initial/inherit;উদাহরণ
align-content: flex-start এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
#para {
width: 100px;
height: 250px;
border: 2px dotted #339966;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-start;
align-content: flex-start;
}
#para div {
width: 100px;
height: 70px;
}
</style>
</head>
<body>
<div id="para">
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:green;"></div>
</div>
<p><b>নোটঃ</b> align-content প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ও তার আগের ভার্সনগুলোতে সাপোর্ট করে না।</p>
<p><b>নোটঃ</b> সাফারি ৭.০ -webkit-align-content কে বিকল্প হিসাবে ব্যবহার করে।</p>
</body>
</html>
নোটঃ align-content প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ও তার আগের ভার্সনগুলোতে সাপোর্ট করে না।
নোটঃ সাফারি ৭.০ -webkit-align-content কে বিকল্প হিসাবে ব্যবহার করে।
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.alignContent="flex-start"উদাহরণ
object.style.alignContent="flex-start" এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 200px;
height: 400px;
border: 1px solid #000000;
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
-webkit-align-content: flex-start; /* Safari 7.0 */
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
#main div {
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:#663300;"></div>
<div style="background-color:#669900;"></div>
<div style="background-color:#669966;"></div>
<div style="background-color:#CC6600;"></div>
<div style="background-color:#666600;"></div>
<div style="background-color:#FFCC00;"></div>
</div>
<p> alignContent প্রোপার্টির ভ্যালু সেট করার জন্য "উদাহরণ দেখুন" বাটনে ক্লিক করুন। </p>
<button onclick="myFunction()">উদাহরণ দেখুন </button>
<script>
function myFunction() {
document.getElementById("main").style.WebkitAlignContent = "space-around"; // Code for Safari 7.0+
document.getElementById("main").style.alignContent = "space-around";
}
</script>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার(১০) এবং তার আগের ভার্সন align-content প্রোপার্টি সাপোর্ট করে না। </p>
<p><b>নোটঃ </b> সাফারি(৭) এবং তার পরের ভার্সন সাপোর্ট করে।</p>
</body>
</html>
নোটঃ ইন্টারনেট এক্সপ্লোরার(১০) এবং তার আগের ভার্সন align-content প্রোপার্টি সাপোর্ট করে না।
নোটঃ সাফারি(৭) এবং তার পরের ভার্সন সাপোর্ট করে।
ফলাফল
align-content প্রোপার্টির ভ্যালু-সমূহ
- stretch - ডিফল্ট ভ্যালু । লাইনগুলো অবশিষ্ট স্থান পর্যন্ত প্রসারিত করে।
- center - flex container এ লাইনগুলো কেন্দ্রে থাকে।
- flex-start - flex container এ লাইনগুলো শুরুতে থাকে।
- flex-end - flex container এ লাইনগুলো শেষে থাকে।
- space-between - flex container এ সমানভাবে বিতরণ করা হয়।
- space-around - লাইনগুলো সমানভাবে শেষ হয়ে, অর্ধপরিমাণ স্পেস দিয়ে flex container এ বিতরণ করা হয়।
- initial -সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
align-content প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।