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

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

ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয় ফ্লেক্সবক্স। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে উক্ত এলিমেন্টের 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

«পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল