ওয়েব ডিজাইন (পর্ব ১৪) সিএসএস ডিসপ্লে ফ্লেক্স

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো ডিসপ্লে ফ্লেক্স।

Display Flex

শুধু মাত্র ফ্লেক্স ভেলু ইউজ করতে নিচের মতো HTML করতে হবে।

Flex containers Display:

এই ফ্লেক্স কন্টেইনার দিয়ে ফ্লেক্স ফরম্যাটিং করতে পারবো। যদি ডিসপ্লে  flex value ব্যবহার করা হয় তবে ডিসপ্লে ব্লক এর মতো কাজ করবে।আর যদি ডিসপ্লে inline-flex ভেলু ইউজ করা হয় তবে ডিসপ্লে ইনলাইন এর মতো কাজ করবে।

 <style>
.container{
    display: flex;
}
.item-1 {
    background: red;
    color: wheat;
    padding: 10px;
    margin: 10px;
}
.item-2 {
    background: green;
    color: wheat;
    padding: 10px;
    margin: 10px;
}
.item-3 {
    background: gold;
    padding: 10px;
    margin: 10px;
}
.item-4{
    background-color:rebeccapurple ;
    color: whitesmoke;
    padding:10px;
    margin: 10px;
}
</style>
    <div class="container">
        <div class="item-1">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>      
          <div class="item-2">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>       
         <div class="item-3">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>    
             <div class="item-4">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>     
    </div>

Orientation

Ordering and orientation এর মাধ্যমে কন্টেইনার এর ভিতরের আইটেম গুলো পর্যায়ক্রমে row, row-reverse, column and column-reverse ভাবে প্রদর্শন করতে পারবো।

নিচের কোডে শুধু column ভেলু ইউজ করা হয়েছে। আপনি  আলাদা আলাদা ভাবে , row, row-reverse, column and column-reverse ব্যবহার করে দেখুন।

<style>
.container {
    display: flex;
    flex-direction: column;
}
.item-1 {
    background: red;
    color: wheat;
    padding: 10px;
    margin: 10px;
}
.item-2 {
    background: green;
    color: wheat;
    padding: 10px;
    margin: 10px;
}
.item-3 {
    background: gold;
    padding: 10px;
    margin: 10px;
}
.item-4{
    background-color:rebeccapurple ;
    color: whitesmoke;
    padding:10px;
    margin: 10px;
}
</style>
    <div class="container">
        <div class="item-1">
            <h1>Item 1</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>      
          <div class="item-2">
            <h1>Item 2</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>       
         <div class="item-3">
            <h1>Item 3</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>    
             <div class="item-4">
            <h1>Item 4</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>     
    </div>

• flex-direction: row; - এইটা ডিফল্ট
• flex-direction: row-reverse; - একই কন্টেন্ট গুলো উল্টা পাশ দিয়ে প্রকাশ পাবে।
• flex-direction: column; - একই কন্টেন্ট গুলো উপর থেকে নিচে নিচে প্রকাশ পায়
• flex-direction: column-reverse; - column এর উল্টা টা বরং নিচে থেকে উপরের দিকে প্রকাশ পাবে।

flex-wrap 

flex-wrap দিয়ে কন্টেন্ট গুলো এক লাইনে অথবা লাইন ব্রেক করতে ব্যবহার করা হয়।

<style>
.container {
    display: flex;
    flex-wrap: wrap;
}
.item-1 {
    background: red;
    color: wheat;
    padding: 10px;
    margin: 10px;
}
.item-2 {
    background: green;
    color: wheat;
    padding: 10px;
    margin: 10px;
}
.item-3 {
    background: gold;
    padding: 10px;
    margin: 10px;
}
.item-4{
    background-color:rebeccapurple ;
    color: whitesmoke;
    padding:10px;
    margin: 10px;
}
</style>
<div class="container">
        <div class="item-1">
            <h1>Item 1</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>      
          <div class="item-2">
            <h1>Item 2</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>       
         <div class="item-3">
            <h1>Item 3</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>    
             <div class="item-4">
            <h1>Item 4</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>     
    </div>

• flex-wrap: nowrap; - এইটা ডিফল্ট
• flex-wrap: wrap; - অটো লাইন ব্রেক করবে। 
• flex-wrap: wrap-reverse; - লাইন ব্রেক অবস্থায় 

Alignment 

ডানে বামে ও বিভিন্ন ভাবে এলাইনমেন্ট করার জন্য ব্যবহার করা হয়।

এলাইনমেন্ট করার জন্য justify-content, align-item and align-content ব্যবহার করতে হয়।

justify-content

x অক্ষ বরাবর বিভিন্ন ভাবে  এলাইনমেন্ট করার জন্য এই জাস্টিফাই কন্টেন্ট ব্যবহার করা হয়।

নিচের কোড চেস্টা করুন।

<style>
.container {
    display: flex;
    justify-content: center;
}
.item-1 {
    background: red;
    color: wheat;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-2 {
    background: green;
    color: wheat;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-3 {
    background: gold;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-4{
    background-color:rebeccapurple ;
    color: whitesmoke;
    padding:10px;
    margin: 10px;
    width: 200px;
}
</style>
    <div class="container">
        <div class="item-1">
            <h1>Item 1</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>      
          <div class="item-2">
            <h1>Item 2</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>       
         <div class="item-3">
            <h1>Item 3</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>    
             <div class="item-4">
            <h1>Item 4</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>     
    </div>

কিছুক্ষেত্রে width না দিলে কাজ করেনা।

Justify-content এর ভেলু

• justify-content: flex-start; - বাম থেকে শুরু হবে। এইটাকে ডিফল্ট বলা যেতে পারে।
• justify-content: flex-end; - শেষ থেকে শুরু হবে।
• justify-content: center; - মাঝ থেকে ২ পাশে ছড়াবে
• justify-content: space-between; - দুই এর মাঝে স্পেস তৈরি করবে।
• justify-content: space-around; - কাছাকাছি বসানোর জন্য।
• justify-content: space-evenly; - সব গুলো কে সমান ভাবে বসানোর জন্য।

align-items

এলাইন আইটেম কোনো কিছু উপরে এবং নিচে কিভাবে প্রদর্শন হবে তা নির্দেশ করে।

নিচের কোড টা একটু দেখুন।

<style>
.container {
    display: flex;
    justify-content: space-evenly;
    height: 350px;
    align-items: center;
}
.item-1 {
    background: red;
    color: wheat;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-2 {
    background: green;
    color: wheat;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-3 {
    background: gold;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-4{
    background-color:rebeccapurple ;
    color: whitesmoke;
    padding:10px;
    margin: 10px;
    width: 200px;
}
</style>
    <div class="container">
        <div class="item-1">
            <h1>Item 1</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>      
          <div class="item-2">
            <h1>Item 2</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>       
         <div class="item-3">
            <h1>Item 3</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>    
             <div class="item-4">
            <h1>Item 4</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>     
    </div>

align-items এর ভেলু গুলো

• align-items: stretch - এই টা ডিফল্ট
• align-items: baseline; - লেখার  উপর নির্ভর করে এলাইন ঠিক করে।
• align-items: flex-end; - নিচের থেকে উপরের দিকে এলাইন করে।
• align-items: flex-start; - উপর থেকে নিচের দিকে এলাইন করে।
• align-items: center; - উপর এবং নিচের মাঝ বরাবর নির্দেশ করে।

align-content 

Y অক্ষ বরাবর অর্থাৎ উপর নিচের মাঝে  এলাইন করতে ব্যবহার করা হয়।

নিচের কোড লক্ষ করুন।

<style>
.container {
    display: flex;
    justify-content: space-evenly;
    height: 391px;
    flex-wrap: wrap;
    align-content: center;
}
.item-1 {
    background: red;
    color: wheat;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-2 {
    background: green;
    color: wheat;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-3 {
    background: gold;
    padding: 10px;
    margin: 10px;
    width: 200px;
}
.item-4{
    background-color:rebeccapurple ;
    color: whitesmoke;
    padding:10px;
    margin: 10px;
    width: 200px;
}
</style>
    <div class="container">
        <div class="item-1">
            <h1>Item 1</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>      
          <div class="item-2">
            <h1>Item 2</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>       
         <div class="item-3">
            <h1>Item 3</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>    
             <div class="item-4">
            <h1>Item 4</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis voluptates laudantium tenetur dolore dolorem nesciunt architecto mollitia consequuntur soluta!</p>
        </div>     
    </div>

align-content এর ভেলুঃ

• align-content: flex-start; - উপর থেকে নিচের দিকে।
• align-content: flex-end; - নিচে থেকে উপর দিকে।
• align-content: center; - মাঝ বরাবর
• align-content: space-between; - উপর এবং নিচে দুই এর মাঝে ফাকা
• align-content: space-around; - কাছাকাছি ভাবে ফাকা
• align-content: stretch - এইটা ডিফল্ট

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।