CSS গ্লিচ টেক্সট ইফেক্ট

আমাদের স্বজ্ঞাত ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেস ব্যবহার করে CSS ফ্লেক্সবক্স কোড ভিজ্যুয়ালাইজ করুন, কাস্টমাইজ করুন এবং জেনারেট করুন।

ধারক বৈশিষ্ট্য

display

flex-direction

flex-wrap

justify-content

align-items

align-content

আইটেম বৈশিষ্ট্য

Items

3 items

আইটেম

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

উত্পন্ন সিএসএস কোড

রিয়েল-ওয়ার্ল্ড উদাহরণ

নেভিগেশন বার

Logo

Home

Products

About

Contact

লোগো সহ একটি সাধারণ নেভিগেশন বার লেআউট বাম, কেন্দ্রে মেনু আইটেম এবং ডানদিকে একটি কার্ট আইকন।

Card Grid

কার্ড শিরোনাম

কার্ড বিবরণ এখানে

কার্ড শিরোনাম

কার্ড বিবরণ পাঠ্য এখানে

কার্ডের শিরোনাম

কার্ডের বিবরণ পাঠ্য এখানে

একটি প্রতিক্রিয়াশীল কার্ড গ্রিড যা ফ্লেক্সবক্স বৈশিষ্ট্যগুলি ব্যবহার করে বিভিন্ন স্ক্রিন আকারের সাথে খাপ খায়।

নিবন্ধ বিন্যাস

নিবন্ধ শিরোনাম

করা হয়েছে জানুয়ারী 1, 2023 · 5 min

পড়ুন নিবন্ধ বিষয়বস্তু এখানে. এটি একটি সংক্ষিপ্ত সারাংশ বা সম্পূর্ণ নিবন্ধ পাঠ্য হতে পারে। ফ্লেক্সবক্স চিত্র এবং পাঠ্যকে দৃশ্যত আকর্ষণীয় উপায়ে সারিবদ্ধ করতে সহায়তা করে।

মোবাইল ডিভাইসে স্ট্যাক করা বাম দিকে একটি চিত্র এবং ডানদিকে পাঠ্য সামগ্রী সহ একটি সাধারণ নিবন্ধ বিন্যাস।

ড্যাশবোর্ড লেআউট

Header

Sidebar

প্রধান সামগ্রী

Footer

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

ফ্লেক্সবক্স ফান্ডামেন্টালস

ফ্লেক্সবক্স কী?

ফ্লেক্সিবল বক্স লেআউট, যা সাধারণত ফ্লেক্সবক্স নামে পরিচিত, এটি একটি সিএসএস 3 লেআউট মডেল যা কোনও ধারকটিতে আইটেমগুলির মধ্যে স্থান বিতরণ এবং সারিবদ্ধ করার একটি কার্যকর উপায় সরবরাহ করে, এমনকি যখন তাদের আকার অজানা বা গতিশীল হয়।

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

মূল ধারণা:ফ্লেক্সবক্স দুটি প্রধান ধারণা প্রবর্তন করে:ফ্লেক্স ধারক and the ফ্লেক্স আইটেম। ধারকটি পিতামাতার উপাদান, এবং আইটেমগুলি তার সরাসরি সন্তান।

প্রধান অক্ষ বনাম ক্রস অক্ষ

ফ্লেক্সবক্স লেআউটগুলি দুটি অক্ষের উপর ভিত্তি করে:main axis and the ক্রস অক্ষ.

প্রধান অক্ষ:প্রাথমিক অক্ষ যা বরাবর ফ্লেক্স আইটেমগুলি রাখা হয়। flex-direction.
ক্রস অক্ষঅক্ষটি প্রধান অক্ষের লম্ব। এর দিকটি প্রধান অক্ষের দিকের উপর নির্ভর করে।

প্রধান অক্ষ →←

ক্রস অক্ষ

Start

Main

End

ধারক বৈশিষ্ট্য

Property	Description
`display`	ফ্লেক্স ধারক সংজ্ঞায়িত করে; প্রদত্ত মানের উপর নির্ভর করে ইনলাইন বা ব্লক।
`flex-direction`	প্রধান অক্ষ স্থাপন করে, এইভাবে ফ্লেক্স পাত্রে স্থাপন করা হয় দিক ফ্লেক্স আইটেম সংজ্ঞায়িত করে।
`flex-wrap`	ডিফল্টরূপে, ফ্লেক্স আইটেমগুলি সমস্ত এক লাইনে ফিট করার চেষ্টা করবে। আপনি এটি পরিবর্তন করতে পারেন এবং এই সম্পত্তির সাথে প্রয়োজনীয় হিসাবে আইটেমগুলি মোড়ানোর অনুমতি দিতে পারেন।
`justify-content`	ফ্লেক্স ধারকটির বর্তমান লাইনের প্রধান অক্ষ বরাবর ফ্লেক্স আইটেমগুলি সারিবদ্ধ করে।
`align-items`	ফ্লেক্স ধারকটির বর্তমান লাইনের ক্রস অক্ষ বরাবর ফ্লেক্স আইটেমগুলি সারিবদ্ধ করে।
`align-content`	ক্রস-অক্ষে অতিরিক্ত স্থান থাকলে একটি ফ্লেক্স ধারকের লাইনগুলি সারিবদ্ধ করে।

আইটেম বৈশিষ্ট্য

Property	Description
`order`	, ফ্লেক্স আইটেমগুলি উত্স ক্রমে রাখা হয়। যাইহোক,`order`আরডার যা তারা ফ্লেক্স পাত্রে উপস্থিত হয়।
`flex-grow`	প্রয়োজনে ফ্লেক্স আইটেমটি বাড়ার ক্ষমতা সংজ্ঞায়িত করে। এটি একটি ইউনিটহীন মান গ্রহণ করে যা অনুপাত হিসাবে কাজ করে।
`flex-shrink`	প্রয়োজনে ফ্লেক্স আইটেমটি সঙ্কুচিত করার ক্ষমতা সংজ্ঞায়িত করে।
`flex-basis`	ফ্লেক্স ফ্যাক্টর অনুসারে কোনও উপলব্ধ স্থান বিতরণ করার আগে একটি ফ্লেক্স আইটেমের প্রাথমিক আকার সংজ্ঞায়িত করে।
`align-self`	পৃথক ফ্লেক্স আইটেমগুলির জন্য ডিফল্ট প্রান্তিককরণ (বা নির্দিষ্ট একটি`align-items`) ওভাররাইড করার

Related Tools

স্পিড ইউনিট কনভার্টার

আপনার প্রকৌশল, বৈজ্ঞানিক এবং দৈনন্দিন প্রয়োজনের জন্য নির্ভুলতার সাথে গতির বিভিন্ন ইউনিটের মধ্যে রূপান্তর করুন

SHA-1 হ্যাশ ক্যালকুলেটর

আপনার Sass কোডকে CSS এ রূপান্তর করুন। দ্রুত, সহজ এবং নিরাপদ।

লোন ক্যালকুলেটর

আপনার লেস কোডকে CSS-এ রূপান্তর করুন। দ্রুত, সহজ এবং নিরাপদ।

হেক্স থেকে এইচএসভি

হেক্সাডেসিমেল সংখ্যাগুলিকে অনায়াসে দশমিকে রূপান্তর করুন

CSS স্ক্রোলবার জেনারেটর

আপনার ওয়েবসাইটের জন্য আকর্ষণীয় রিবন ডিজাইন করুন

এইচটিএমএল মিনিফায়ার

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