সিএসএস align-items প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Internet Explorer | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| align-items: | ২১.০ | ১২.০ | ১১.০ | ২০.০ | ৯.০ | ১২.১ |
সংজ্ঞা ও ব্যবহার
ফ্লেক্সিবল কন্টেইনারের ভিতরে align-items প্রোপার্টি ডিফল্ট এলাইনমেন্ট নির্দেশ করে ।
পরামর্শঃ
- align-items প্রোপার্টি override করতে প্রতিটি আইটেমে align-self প্রোপার্টি ব্যবহার করুন ।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| strech | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
align-items: stretch/center/flex-start/flex-end/baseline/initial/inherit;উদাহরণ
align-items: center এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
#main {
width: 220px;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">লাল</div>
<div style="background-color:lightblue;">
নীল</div>
<div style="background-color:lightgreen;">
সবুজ div এর সঙ্গে আরো কন্টেন্ট।</div>
</div>
<p><b>নোটঃ </b> align-item প্রোপার্টি IE10 এবং তার আগের ভার্সনগুলোতে সাপোর্টি করে না।
</p>
<p><b>নোটঃ</b> -webkit-align-item প্রোপার্টি Safari 7.0 (এবং তুলনামূলক নতুন) ব্রাউজারে সাপোর্ট করে।
</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.alignItems="center"উদাহরণ
object.style.alignItems: center এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
div#main {
width: 220px;
height: 200px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
div#main div {
-webkit-flex: 1; /* Safari 7.0+ */
flex: 1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">লাল</div>
<div style="background-color:lightblue;">নীল</div>
<div style="background-color:lightgreen;">সবুজ div এর সঙ্গে আরো কন্টেন্ট।</div>
</div>
<p>align-Items প্রোপার্টির "flex-start" এর ভ্যালু সেট করতে "উদাহরন দেখুন" বাটনে ক্লিক করুন।</p>
<button onclick="myFunction()">উদাহরন দেখুন</button>
<script>
function myFunction() {
document.getElementById("main").style.WebkitAlignItems = "flex-start"; // Code for Safari 7.0+
document.getElementById("main").style.alignItems = "flex-start";
}
</script>
<p> <b>নোটঃ </b> align-items প্রোপার্টি ইন্টারনেট এক্সপ্লোরার(১০) এবং তার আগের ভার্সনে সাপোর্ট করে না।</p>
<p><b>নোটঃ </b> -webkit-align-item প্রোপার্টি Safari 7.0 (এবং তুলনামূলক নতুন) ব্রাউজারে সাপোর্ট করে। </p>
</body>
</html>
ফলাফল
align-items প্রোপার্টির ভ্যালু-সমূহ
- stretch - ডিফল্ট ভ্যালু । লাইনগুলো অবশিষ্ট স্থান পর্যন্ত প্রসারিত করে।
- center - flex container এ লাইনগুলো কেন্দ্রে থাকে।
- flex-start - flex container এ লাইনগুলো শুরুতে থাকে।
- flex-end - flex container এ লাইনগুলো শেষে থাকে।
- baseline - আইটেমগুলো কন্টেইনারের বেইসলাইনে অবস্থান করে।।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
align-items প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।