CSS-এ ফ্লেক্সবক্স নিয়ে কাজ
আপনি জানেন, justify-content নামে একটি বৈশিষ্ট্য রয়েছে,
যা প্রধান অক্ষ বরাবর উপাদানগুলিকে সারিবদ্ধ করে।
এছাড়াও align-items নামে একটি বৈশিষ্ট্য রয়েছে, যা
ক্রস অক্ষ বরাবর উপাদানগুলিকে সারিবদ্ধ করে। আসুন
এর সাথে একটু খেলাধুলা করি।
ধরুন আমাদের ব্লকগুলি একটি সারিতে সাজানো আছে,
অর্থাৎ ক্রস অক্ষটি নীচের দিকে নির্দেশিত। এর
সাহায্যে align-items এই ব্লকগুলিকে
কেন্দ্রে সেট করি:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
এখন আরও ব্লক যোগ করি, এর সাহায্যে
মাল্টিলাইন যোগ করি flex-wrap,
300px থেকে প্যারেন্টের উচ্চতা বাড়াই
500px-এ এবং দেখি align-items
কিভাবে কাজ করে এই মাল্টিলাইন ক্ষেত্রে:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
আমরা দেখতে পাচ্ছি, কেন্দ্রীকরণটি খুব ভালভাবে কাজ করছে না। মনে হচ্ছে প্রতিটি সারি নিজস্ব বরাদ্দকৃত স্থানে নিজে থেকেই কেন্দ্রীভূত হচ্ছে। আসুন এটি এমনভাবে করি যাতে সমস্ত সারি একটি একক সম্পূর্ণ হিসাবে প্যারেন্টের কেন্দ্রে অবস্থান করে।
এর জন্য align-content বৈশিষ্ট্যটি ব্যবহার করা উচিত,
যা মাল্টিলাইন টেক্সটের জন্য প্রয়োজন।
আসুন আমাদের কোডটি পুনরায় লিখি:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
align-content বৈশিষ্ট্যটি align-items-এর
মত একই মানগুলি গ্রহণ করে।
space-between মান
উদাহরণস্বরূপ space-between মানটি দেখি।
প্যারেন্টের উচ্চতা 320px-এ সেট করি। যেহেতু আমাদের তিনটি
সারি রয়েছে, এবং সেই অনুসারে দুটি দূরত্ব
সারিগুলির মধ্যে, তাই এই দূরত্বগুলি প্রতিটি
10px সমান হবে:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
stretch মান
চলুন stretch মানটি试一试করি।
এর জন্য চাইল্ড elementsদের উচ্চতা সরিয়ে ফেলি, এবং প্যারেন্টের
উচ্চতা 600px-এ সেট করি আরও স্পষ্ট প্রভাবের জন্য।
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
align-content-এর জন্য stretch মানটি হল
ডিফল্ট মান। যদি আমরা চাইল্ড elementsদের উচ্চতা সম্পূর্ণভাবে সরিয়ে ফেলি,
align-content বৈশিষ্ট্যটি সরিয়ে ফেলি,
কিন্তু প্যারেন্টের উচ্চতা এবং flex-wrap
রেখে দিই - সবকিছু একইভাবে কাজ করবে:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
কিন্তু যদি flex-wrap-ও সরিয়ে ফেলা হয়
- সবকিছু একক-লাইন হয়ে যাবে:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
অক্ষটি উল্টিয়ে দেই
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
বিশেষ শর্ত
flex-wrap: wrap ছাড়া কিছুই কাজ করে না যদি আমাদের একটি লাইন থাকে:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
flex-wrap: wrap সরিয়ে ফেলি - align-content: center কাজ করা বন্ধ করে দেবে:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
