সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) ফ্লেক্স বক্স


ফ্লেক্সবক্স হচ্ছে সিএসএস(৩) এর নতুন লেআউট। পেজ লেআউট যখন বিভিন্ন সাইজের স্ক্রিন এবং বিভিন্ন ডিভাইসে প্রদর্শিত হবে তখন এলিমেন্ট গুলোকে পূর্ব নির্ধারিত নকশা অনুযায়ী প্রদর্শন করানোর জন্য সিএসএস(৩) ফ্লেক্সবক্স ব্যবহার করা হয়।

ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয় ফ্লেক্সবক্স। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে উক্ত এলিমেন্টের display প্রোপার্টিতে ভ্যালু হিসেবে flex অথবা inline-flex সেট করতে হয়।

একটি ফ্লেক্স কন্টেইনারের মধ্যে এক বা একাধিক ফ্লেক্স কন্টেন্ট থাকতে পারে। ফ্লেক্স কন্টেন্ট ফ্লেক্স কন্টেইনারের ভিতরে লাইনে অবস্থান করে। ডিফল্ট ভাবে প্রতিটি ফ্লেক্স কনটেইনারে একটি করে লাইন থাকে।

নিম্নের উদাহরণে তিনটি ফ্লেক্স কন্টেন্ট দেখানো হল যেগুলোকে ডিফল্ট ভাবে অনুভূমিক আকারে লাইনে অর্থাৎ বাম থেকে ডান দিকে সাজবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



আমরা direction প্রোপার্টি ব্যবহার করে ফ্লেক্সবক্সেরে গতিপথ পরিবর্তন করতে পারি। এখন আমরা যদি </body> ট্যাগে direction প্রোপার্টির মান rtl সেট করি সেক্ষেত্রে ফ্লেক্সবক্সেরে গতিপথের সাথে সাথে সম্পূর্ণ পেজের লেআউটও পরিবর্তন হয়ে যাবে।

নিম্নের উদাহরণে দেখবো কিভাবে ফ্লেক্স এলিমেন্টের গতিপথ ডান থেকে বামে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
body {
    direction: rtl;
}
.flex-items {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল




ফ্লেক্সবক্সের গতিপথ

ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স এলিমেন্ট গুলোর গতিপথ flex-direction প্রোপার্টি দ্বারা করে। আমরা flex-direction প্রোপার্টি ব্যবহার করে ফ্লেক্স এলিমেন্ট গতিপথ পরিবর্তন করতে পারি। নিম্নের এতে ব্যবহৃত ভ্যালু গুলো দেওয়া হলোঃ

  • row - টেক্সটের গতিমুখ যদি উপর থেকে নিচে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে বাম থেকে ডানে। এটি ডিফল্ট ভ্যালু।
  • row-reverse - টেক্সটের গতিমুখ যদি বাম থেকে ডানে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে ডান থেকে বামে।
  • column - টেক্সট যদি অনুভূমিক হয় তবে ফ্লেক্স হবে উলম্ব।
  • column-reverse - এটি column এর বিপরীত কাজ করে।

নিম্নের উদাহরণে আমরা row-reverse এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা column এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
   -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 380px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা column-reverse এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 380px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল




justify-content প্রোপার্টি

আপনি justify-content প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে অনুভূমিক ভাবে সাজাতে পারবেন।

justify-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ

  • flex-start - ডিফল্টভাবে কন্টেন্ট গুলো কন্টেইনারের শুরুতে অবস্থান করে
  • flex-end - কন্টেন্টগুলো কন্টেইনারের শেষে অবস্থান করে
  • center - কন্টেন্টগুলো কন্টেইনারের কেন্দ্রে অবস্থান করে
  • space-between -কন্টেন্ট গুলো নিজেদের মধ্যে দূরত্ব বঝায় রেখে অবস্থান করে
  • space-around - কন্টেন্ট গুলো নিজেদের চারপাশে দূরত্ব বঝায় রেখে অবস্থান করে

নিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
     -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
     -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা space-between এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা space-around এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল




align-items প্রোপার্টি

আপনি align-items প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে উলম্ব ভাবে সাজাতে পারবেন।

align-items এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ

  • stretch - ডিফল্ট ভাবে কন্টেন্টগুলো সম্পূর্ন কন্টেইনার জুড়ে থাকে।
  • flex-start - কন্টেন্ট গুলো কন্টেইনারের উপরে অবস্থান করে।
  • flex-end - কন্টেন্ট গুলো কন্টেইনারের নিচে অবস্থান করে।
  • center - কন্টেন্ট গুলো কন্টেইনারের কেন্দ্রে উলম্বভাবে অবস্থান করে।
  • baseline - কন্টেন্টগুলো কন্টেইনারের বেসলাইনে অবস্থান করে।

নিম্নের উদাহরণে আমরা stretch এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা flex-start এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা baseline এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল




flex-wrap প্রোপার্টি

আপনি flex-wrap প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের কন্টেন্ট গুলো wrap হবে কিনা তা নির্দেশ করতে পারেন।

flex-wrap এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ

  • nowrap - ডিফল্টভাবে ফ্লেক্স কন্টেন্ট গুলো wrap করা থাকে না।
  • wrap - যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলো wrap করে।
  • wrap-reverse - যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলোকে বিপরিত দিক থেকে wrap করে।

নিম্নের উদাহরণে আমরা nowrap এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 230px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা wrap এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 230px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



নিম্নের উদাহরণে আমরা wrap-reverse এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
   -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 230px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল




align-content প্রোপার্টি

আপনি align-content প্রোপার্টি ব্যবহার করে flex-wrap প্রোপার্টিকে মোডিফাই করতে পারেন। align-content প্রোপার্টি অনেকটা align-items প্রোপার্টির মত কাজ করে। তবে এক্ষেত্রে এটি ফ্লেক্স কন্টেন্টের পরিবর্তে ফ্লেক্স লাইনকে সাজায়।

align-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ

  • stretch - ডিফল্টভাবে লাইন গুলো কন্টেইনারের খালি অংশ জুড়ে থাকে।
  • flex-start - লাইন গুলো কন্টেইনারের শুরুতে থাকে।
  • flex-end - লাইন গুলো কন্টেইনারের শেষে থাকে।
  • center - লাইন গুলো কন্টেইনারের কেন্দ্রে থাকে।
  • space-between - কন্টেইনারের লাইন গুলো জোড়া জোড়া করে থাকে।

নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
   -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 230px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল




ফ্লেক্স কন্টেন্ট প্রোপার্টি

আপনি order প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
.third{
   -webkit-order: -1;
    order: -1;
    }
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box third">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



আপনি margin: auto; সেট করে অতিরিক্ত জায়গা নেওয়ার মাধ্যমে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: 10px;
}
.flex-box:nth-child(2){
  margin: auto;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল



আপনি margin: auto; ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্টকে যথাযথভাবে কেন্দ্রে অবস্থান করাতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    width: 80px;
    height: 80px;
    margin: auto;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box">মাঝে আনার পদ্ধতি</div>
</div>

</body>
</html>

ফলাফল



আপনি flex প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর দৈঘ্য এবং প্রস্থ পরিবর্তন করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: grey;
}
.flex-box {
    background-color: yellowgreen;
    margin:8px;
}
.first {
    -webkit-flex: 1;
    flex: 1;
}
.second {
    -webkit-flex: 2;
    flex: 2;
}
.third {
    -webkit-flex: 1;
    flex: 1;
}
</style>
</head>
<body>

<div class="flex-items">
 <div class="flex-box first">ফ্লেক্স কন্টেন্ট ১</div>
 <div class="flex-box second">ফ্লেক্স কন্টেন্ট ২</div>
 <div class="flex-box third">ফ্লেক্স কন্টেন্ট ৩</div>
</div>

</body>
</html>

ফলাফল




ব্রাউজার সাপোর্ট

ব্রাউজার সাপোর্ট

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera
Basic support
(single-line flexbox)
29.0
21.0 -webkit-
11.0 22.0
18.0 -moz-
6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-
11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1