CSS ফ্লেক্স প্রতিভা

  • পূর্ববর্তী পৃষ্ঠা filter
  • পরবর্তী পৃষ্ঠা flex-basis

বিবরণ ও ব্যবহার

ফ্লেক্স হল নিম্নলিখিত এপারেন্টের সংক্ষিপ্ত এপারেন্ট:

ফ্লেক্স সেট হল ফ্লেক্সিবল প্রকল্পের ফ্লেক্সিবল দৈর্ঘ্য。

মন্তব্য:যদি এলিমেন্ট একটি ফ্লেক্সিবল প্রকল্প না হোক, তবে ফ্লেক্স এপারেন্ট কার্যকর না হবে。

আরও দেখুন:

শিক্ষাক্রম: CSS ফ্লেক্স বক্স

উল্লেখ:CSS ফ্লেক্স-বেসিস প্রতিভা

উল্লেখ:CSS ফ্লেক্স-ডায়রেকশন প্রতিভা

উল্লেখ:CSS ফ্লেক্স-ফ্লো প্রতিভা

উল্লেখ:CSS ফ্লেক্স-গ্রো প্রতিভা

উল্লেখ:CSS ফ্লেক্স-শ্রিনক প্রতিভা

উল্লেখ:CSS ফ্লেক্স-ওয়্যাপ প্রতিভা

উল্লেখ:HTML DOM flex বৈশিষ্ট্য

প্রমাণ

কোনও কনটেন্ট না থাকলেও, সকল ফ্লেক্স প্রকল্পকে একই দৈর্ঘ্যের করুন:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

আপনার নিজের করে প্রয়োগ করুন

CSS সংজ্ঞা

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

প্রতিভূতি

মান বর্ণনা
flex-grow নম্বর, যা প্রকল্পটি অন্য সকল ফ্লেক্স প্রকল্পের তুলনায় কতটা বৃদ্ধি করবে
flex-shrink নম্বর, যা প্রকল্পটি অন্য সকল ফ্লেক্স প্রকল্পের তুলনায় কতটা কৃত্রিম হবে
flex-basis

প্রকল্পের দৈর্ঘ্য

বৈধ মান: "auto"、"inherit" বা "%"、"px"、"em" ইকাইয়াকে সমাপ্ত মান বা অন্য কোনও দৈর্ঘ্য ইকাইয়া
auto সমান 1 1 auto
initial সমান 0 1 auto initial。
none সমান 0 0 auto
inherit পিতৃত্ব থেকে এই বৈশিষ্ট্যটি উত্তরাধিকার করুন। দেখুন: inherit。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: 0 1 auto
প্রবর্তন: না
অ্যানিমেশন নির্মাণ: সমর্থন করা হয়। বিশেষ বৈশিষ্ট্যগুলি দেখুন: প্রদত্তঅ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: CSS3
JavaScript সংজ্ঞা: object.style.flex="1"

আরও প্রমাণ

ফ্লেক্স এবং মিডিয়া কোয়াইয়ার ব্যবহার করে বিভিন্ন স্ক্রিন মাপ/ডিভাইসের জন্য ভিন্ন লেআউট তৈরি করুন:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* প্রতিক্রিয় সাজ-সজ্জা - দুই সারির বদলে একটি সারি (100％) তৈরি করুন */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

আপনার নিজের করে প্রয়োগ করুন

ব্রাউজার সমর্থন

টেবিলের নম্বরগুলি এই বৈশিষ্ট্যটির পূর্ণাঙ্গ সমর্থন করা প্রথম ব্রাউজার সংস্করণটি উল্লেখ করে

প্রথম সংস্করণটির প্রিফিক্স ব্যবহার করে -webkit-、-ms- বা -moz- এর সঙ্গে নম্বরগুলি

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • পূর্ববর্তী পৃষ্ঠা filter
  • পরবর্তী পৃষ্ঠা flex-basis