আজকে আমরা শিখতে যাচ্ছি CSS এর মজার একটি বিষয় একই সাথে গরিত্বপূর্ণও। সেটি হচ্ছে CSS flexbox!
হোক সেটা Responsive navigation bar, কোনো element কে horizontally এবং vertically center করা, Responsive layout তৈরি করা ইত্যাদি প্রায় সব ক্ষেত্রই আমাদের এই CSS flexbox প্রয়োজন হয়।
কেন CSS flexbox?
কোনো একটা website এর one dimensional layout তৈরি করার জন্য CSS flexbox অপরিহার্য। তাছাড়া বিভিন্ন layout designing property যেমন float , position, display: inline/block etc. ছাড়াই flexbox দিয়ে খুব সহজেই ওয়েবসাইটের flexible responsive layout structure design করতে পারব ।
One dimensional layout কি?
কোনো একটা website এর One dimensional layout বলতে শুধু সারি(row) অথবা কলাম (column ) কে বোঝায়।
Flexbox ব্যাবহার করার প্রথম শর্ত হচ্ছে এর Parent element বা Flex container এবং Child elements বা Flex items (যা Flex container এর ভিতর থাকবে ) থাকবে।
Flex container এবং Flex items উভয় element এর নিজিস্ব কিছু property-value রয়েছে। নিচে তা সংক্ষেপে বলা হলো।
আমাদের html file এ যা থাকবে: একটি container div এবং তার ভিতর তিনটি child element / div . প্রত্যেকটা child element এর common class হচ্ছে box এবং আলাদা class গুলো যথাক্রমে box1, box2 and box3.
<div class=”container”>
<div class=”box box1"> </div>
<div class=”box box2"> </div>
<div class=”box box3"> </div>
</div>আমাদের CSS file এ যা থাকবে:container কে এবং প্রত্যেকটা box/flex-item কে একটা নির্দিষ্ট height, width, background-color and margin দিয়ে দেই
.container{
height: 500px;
background-color: rgba(0, 0, 0, 0.5)
}
.box{
height: 110px;
width: 110px;
background-color: #B7C5F8;
margin: 20px;
}Parent element (Flex container):
প্রথমেই কোন একটা container কে flexbox container বানানোর জন্য সেই কন্টেইনারের display property এর value flex দিতে হবে । তাহলে এবার আমরা আমাদের edit করি:
Syntax:
.container{
display: flex;
}এটা implement করার পর আমাদের site টির বর্তমান অবস্থা:
display: flex; দেয়ার মাধ্যমে এখন আমরা ওই কন্টেইনারে flex রিলেটেড আরো property এবং value এড করতে পারবো একইসাথে container এর children(box1, box2, box3) গুলোকে flexible করতে পারব ।
flex-container এর important property:
justify-content
align-items
flex-wrap
flex-directionপ্রত্যেকটা property এর আবার বিভিন্ন value রয়েছে সেগুলো আলোচনা করা হল:
justify-content এবং align-items উভয় property flex-items বা child element গোলোকে alignment করার জন্য ব্যাবহার করা হয়। justify-content property flex-items গোলোকে শুধু horizontally(আনুভূমিক ভৱে ) align করতে ব্যাবহার করা হয় এবং align-items property flex-items গোলোকে শুধু vertically(খাড়া খাড়ি ভাবে ) align ব্যাবহার করা হয় । তবে এই নিয়ম সব ক্ষেত্রে প্রযোজ্য না। তা নিয়ে শেষে আলোচনা করা হয়েছে
justify-content: flex-start;
flex-start হচ্ছে justify-content এর default value . এটি container এর flex-item গুলোকে horizontal line এর প্রথমে align করে ।
.container{
display: flex;
justify-content: flex-start;
}
justify-content: flex-end;
এটি container এর flex-item গুলোকে horizontal line এর শেষে align করে ।
.container{
display: flex;
justify-content: flex-end;
}
justify-content: center;
এটি container এর flex-item গুলোকে horizontal line এর মাঝখানে align করে ।
.container{
display: flex;
justify-content: center;
}
justify-content: space-around;
এটি container এর flex-item গুলোর প্রথমে,মাঝখানে এবং শেষে space দিয়ে দেয়।
.container{
display: flex;
justify-content: space-around;
}
justify-content: space-between;
এটি container এর flex-item গুলোর line এর মাঝে space দিয়ে দেয়।
.container{
display: flex;
justify-content: space-between;
}
align-items: center;
এটি container এর flex-item গুলোকে vertical line(cross-axis) এর মাঝখানে align করে ।
.container{
display: flex;
align-items: center;
}
align-items: flex-start;
এটি container এর flex-item গুলোকে vertical line(cross-axis) এর প্রথমে align করে ।
.container{
display: flex;
align-items: flex-start;
}
align-items: flex-end;
এটি container এর flex-item গুলোকে vertical line(cross-axis) এর শেষে align করে ।
.container{
display: flex;
align-items: flex-end;
}
flex-wrap: wrap;
default ভাবে flex-item গুলো এক লাইনে ফিট হওয়ার চেষ্টা করবে যতগুলি item ই থাকুক না কেন। flex-wrap এর value wrap; set করার মাধ্যমে item গুলো responsive ভাবে প্রয়জনীয় line এ fit হবে।
.container{
display: flex;
flex-wrap: wrap;
}
flex-direction: row(default); / flex-direction: row-reverse;
flex-container কোন দিকে তার item গোলোকে align করবে বা সাজাবে তা flex-direction property দ্বারা define করা যায়. By default এর value row থাকে যার কারণে item গুলো row বরাবর থাকে। এবং এর main-axis হয় row বরাবর এবং cross-axis হয় column বরাবর. flex-direction এর value যখন row-reverse করা হয় তখন flex-item গুলো row বরারব শেষেরটা থেকে শুরু হয় ।
.container{
display: flex;
flex-direction: row || row-reverse;
}flex-direction: column; / flex-direction: column-reverse;
flex-direction এর value যখন column করা হয় তখন flex-item গুলো column বরারব থাকে। তখন এর main-axis হয় column বরাবর এবং cross-axis হয় row বরাবর. flex-direction এর value যখন column-reverse করা হয় তখন flex-item গুলো column বরারব শেষেরটা থেকে শুরু হয়।
.container{
display: flex;
flex-direction: column || column-reverse;
}
NOTE: flex-direction এর value যখন column set করা তখন যেহেতু main-axis column বরাবর হয় এবং cross-axis row বরাবর হয় তাই সেক্ষেত্রে justify-content main-axis বা column কে define করবে এবং align-items cross-axis বা row কে define করবে।
Perfect Centering:
কোনো একটা flexbox item কে horizontally এবং vertically খুব সহজেই center করা যায়. code:
.container{
height: 350px;
display: flex;
justify-content: center;
align-item: center;
}
আজ এ পর্যন্তই থাক। পরবর্তী blog এ CSS Flexbox ব্যবহার করে একটা navigation bar তৈরি করবো। till then stay_safe, practice coding.
