Flexbox CSS en langue maternelle bengali

Si vous êtes nouveau dans CSS et que vous souhaitez créer de belles mises en page flexibles en utilisant du CSS pur, alors avoir une compréhension claire de CSS Flexbox est très important pour vous. Même les frameworks CSS populaires tels que Bootstrap gèrent le système de grille de mise en page via Flexbox et si vous souhaitez également travailler avec Tailwind CSS, il est important de connaître Flexbox. Je vais essayer dans cet article de donner très facilement une idée complète de cette importante propriété d'affichage flexbox de CSS 3.0. Alors commençons.

Flexbox en bref :

CSS flexbox est une propriété d'affichage flexible. Avec l'aide de flexbox, nous pouvons facilement corriger la disposition, l'espace et l'alignement des éléments dans un conteneur le long de l'axe x ou de l'axe y.

L'élément sur lequel la propriété display:flex est appliquée est appelé le conteneur flex et les éléments à l'intérieur du conteneur flex sont appelés éléments flex.

Un conteneur flexible a deux axes, l'un est l'axe principal et l'autre est l'axe transversal. Jetons un coup d'œil à la mise en page flexible avec une image en un coup d'œil.

Détails du conteneur Flexbox :

Si un élément HTML reçoit la propriété display:flex, il devient un conteneur flex et les éléments enfants directs du conteneur flex deviennent des éléments flex. Simultanément, les éléments flexibles sont positionnés le long du côté gauche à droite.

.container{
        display: flex;
}

Voir la figure ci-dessous pour comprendre le conteneur flexible.

flex-direction :
La propriété flex-direction est utilisée pour déplacer les éléments flexibles le long de l'axe x ou de l'axe y. Il existe 4 valeurs possibles pour la propriété flex-direction. Ce sont les suivants.

.container{
        display: flex;
        flex-direction: row || row-reverse || column || column-reverse;
}

• flex-direction: row; ফ্লেক্স আইটেম গুলো বাম থেকে ডানে অবস্থান করবে।
• flex-direction: row-reverse; ফ্লেক্স আইটেম গুলো ডান থেকে বামে অবস্থান করবে।
• flex-direction: column; ফ্লেক্স আইটেম গুলো উপর থেকে নিচে y-axis বরাবর অবস্থান করবে।
• flex-direction: column-reverse; ফ্লেক্স আইটেম গুলো নিচে থেকে উপরে y-axis বরাবর অবস্থান করবে।

flex-wrap:
বাই ডিফল্ট ফ্লেক্স আইটেম গুলো nowrap করা থাকে যে কারণে আইটেম গুলো একটি লাইনে দেখায়। এটির একটা সমস্যা হল ডিভাইস উইড্থ ছোট হলে যে কয়েকটা আইটেম ডিভাইস এ দেখানো সম্ভব সেগুলো দেখাবে এবং অন্য আইটেম গুলোকে শেষের দিক থেকে দেখা যাবে না কারণ সেগুলো overflow হয়ে যাবে। flex-wrap ব্যবহার করে খুব সহজেই এই বেহেভিওর পরিবর্তন করা যায়। flex-wrap প্রপার্টির ৩ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।

.container{
        display: flex;
        flex-wrap: nowrap || wrap || wrap-reverse;
}

• flex-wrap: nowrap; সকল ফ্লেক্স আইটেম গুলো একটি লাইন এ অবস্থান করবে।
• flex-wrap: wrap; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো উপর থেকে নিচে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।
• flex-wrap: wrap-reverse; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো বিপরীত ভাবে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।

flex-flow:
flex-direction এবং flex-wrap এর শর্টহ্যান্ড হল flex-flow। প্রথমে লিখতে হবে flex-direction এবং পরে লিখতে হবে flex-wrap প্রপার্টি। flex-flow এর ডিফল্ট মান হলঃ flex-flow: row nowrap;

.container{
        display: flex;
        flex-flow: row wrap;
}

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

.container{
        display: flex;
        justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;
}

• 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:
ফ্লেক্স কন্টেইনার এর প্রত্যেকটা লাইন এর আইটেম গুলোকে উপর থেকে নিচে বরাবর align করার জন্য align-items প্রপার্টি ব্যবহার করা হয়। align-items প্রপার্টির ৫ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।

.container{
        display: flex;
        align-items: flex-start || stretch || flex-end || center || baseline;
}

• align-items: flex-start; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপড়ে অবস্থান করবে।
• align-items: stretch; একটি ফ্লেক্স কন্টেইনার এর মধ্যে যদি একটি লাইনেয় আইটেম থাকে তাহলে আইটেম গুলো পুরো কন্টেইনার এর উচ্চতা টাই নিবে আর দুই লাইন এ আইটেম থাকলে পুরো কন্টেইনার এর উচ্চতা এর অর্ধেক জায়গা নিবে।
• align-items: flex-end; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের নিচে অবস্থান করবে।
• align-items: center; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপর থেকে নিচ বরাবর কেন্দ্রে অবস্থান করবে।
• align-items: baseline; ফ্লেক্স আইটেম গুলো তাদের baseline অনুসারে align হবে।

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

.container{
        display: flex;
        align-content: flex-start || flex-end || center || stretch || space-between || space-around || space-evenly;
}

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

gap, row-gap, column-gap:
ফ্লেক্স আইটেম গুলোর মধ্যে ফাঁকা জায়গা রাখার জন্য gap প্রপার্টি ব্যবহার করা হয়।
ফ্লেক্স আইটেম গুলোর মধ্যে মেইন আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য row-gap প্রপার্টি ব্যবহার করা হয়।
ফ্লেক্স আইটেম গুলোর মধ্যে ক্রস আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য column-gap প্রপার্টি ব্যবহার করা হয়।

.container{
        display: flex;
        gap: 24px;
          /* gap: 24px 30px; */ /* row-gap column-gap */
          /* row-gap: 24px; */
          /* column-gap: 24px; */
}

ফ্লেক্সবক্স আইটেম বিস্তারিতঃ

ফ্লেক্স কন্টেইনার এর সরাসরি চাইল্ড এলেমেন্ট গুলোই ফ্লেক্স আইটেম।

order:
ফ্লেক্স আইটেম গুলোর ডিফল্ট অর্ডার হিসাবে ০ থাকে। এইচটিএমএল কোড অনুযায়ী আইটেম গুলোর অর্ডার থাকে কিন্তু আলাদা করে কোন একটি আইটেম এর অর্ডার এর মান নির্ধারণ করে দিলে সেই অর্ডার অনুযায়ী আইটেম গুলো অবস্থান করবে।

.container{
        display: flex;
}
/* অর্ডার পরিবর্তন করার কোড */
.item{
        order: 2;
}
.item-1{
        order: 1;
}

flex-grow:
মেইন আক্সিস বরাবর একটি লাইনে যতগুলো আইটেম থাকে সেই আইটেম গুলো ছাড়া যদি কোন ফাঁকা জায়গা থাকে তাহলে সেই ফাঁকা জায়গা সবগুলো আইটেম এর মধ্যে সমান ভাবে ছড়িয়ে দেওয়া অথবা কোন একটি নির্দিষ্ট আইটেম এর মধ্যে ছড়িয়ে দেওয়ার জন্য flex-grow ব্যবহার হয়। সবগুলো আইটেম এর মধ্যে ফাঁকা জায়গা সমানভাবে ছড়িয়ে দেওয়ার জন্য সবগুলো আইটেম কে flex-grow: 1; দিতে হয়। এক্ষেত্রে আইটেম গুলোর উইড্থ নির্ধারণ করা থাকলেও যখন ফাঁকা জায়গা পাবে সেই ফাঁকা যায়গা নিজেদের মধ্যে নিয়ে নিবে এবং সমান ভাবে আকৃতি পরিবর্তন করবে। অথবা কোন একটি নির্দিষ্ট আইটেম কে টার্গেট করেও flex-grow অ্যাপ্লাই করা যায়। ডিফল্ট flex-grow এর মান থাকে ০।

        display: flex;
}
.item-3{
        flex-grow: 1;
}

flex-shrink:
flex-shrink ঠিক flex-grow এর উল্টো। ব্রাউজার উইন্ডো ছোট করার সাথে সাথে আইটেম গুলো shrink করবে কিনা সেটা নির্ভর করে flex-shrink এর উপর। ডিফল্ট মান থাকে ১ যার কারণে আইটেম গুলো shrink করে কিন্তু shrink এর মান ০ করে দিলে রেস্পন্সিভনেস থাকবে না এবং আইটেম গুলো ব্রাউজার উইন্ডো এর বাহিরে চলে যাবে।

.item-1 {
  flex-shrink: 0; /* ডিফল্ট 1 */
}

flex-basis:
flex-basis হল কোন একটি আইটেম এর মিনিমাম কত উইড্থ হবে সেইটা নির্ধারণ করে দেওয়া। এটা অনেকটা min-width প্রপার্টি এর মত কিন্তু flex-basis এর সবচেয়ে বড় সুবিধা হল ব্রাউজার উইন্ডো উইড্থ যদি আইটেম গুলোর flex-basis এর মোট মানের তুলনায় ছোট হয় তাহলে আইটেম overflow না হয়ে রেস্পন্সিভলি উইড্থ টা কমিয়ে নিবে।

.item {
  flex-basis: 500px; /* ডিফল্ট auto */
}

flex:
flex-grow, flex-shrink এবং flex-basis একসাথে লেখার জন্য আমরা flex শর্টহ্যান্ড টা ব্যবহার করতে পারি।

.item {
  flex: flex-grow flex-shrink flex-basis;
}

align-self:
align-self প্রপার্টি ব্যবহার করে কোন একটা নির্দিষ্ট ফ্লেক্স আইটেম এর ডিফল্ট এলাইনমেন্ট ওভাররাইড করা যায়। align-items এর মতো align-self এ একয় রকম মান (stretch, center, flex-start, flex-end, baseline) ব্যবহার করা যায় এবং একই লজিক এ কাজ করে। তবে align-self এর ডিফল্ট মান হল auto।

.item-2 {
  align-self: auto || flex-start || flex-end || center || baseline || stretch;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!