ফ্লেক্স: 1 এর অর্থ কী?

Question

আমরা সবাই জানি যে, flexসম্পত্তির জন্য একটি সাঁটে লেখার হয় flex-grow, flex-shrinkএবং flex-basisবৈশিষ্ট্য। এর ডিফল্ট মান 0 1 auto, যার অর্থ

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

তবে আমি লক্ষ করেছি, অনেক জায়গায় flex: 1ব্যবহার করা হয়। এটা শর্টহ্যান্ডের জন্য 1 1 autoনাকি 1 0 auto? আমি এর অর্থ কী বুঝতে পারি না এবং গুগল করলে আমি কিছুই পাই না।

Comments

w3schools.com উদ্ধৃত করে "এই নমনীয় সম্পত্তি হ'ল সংক্ষিপ্ত-বৃদ্ধি, ফ্লেক্স-সঙ্কুচিত করা এবং নমনীয় ভিত্তিক বৈশিষ্ট্যগুলির জন্য একটি সংক্ষিপ্তকরণ"

— ইমরান আলী

Answer 1

এখানে ব্যাখ্যা:

https://www.w3.org/TR/css-flexbox-1/#flex-common

ফ্লেক্স: <পজিটিভ - সংখ্যা>
ফ্লেক্সের সমান: <পজিটিভ - সংখ্যা> 1 0. নমনীয় আইটেমটিকে নমনীয় করে তোলে এবং ফ্লেক্সের ভিত্তিকে শূন্যে সেট করে, ফলস পাত্রে খালি স্থানের নির্দিষ্ট অনুপাত প্রাপ্ত কোনও আইটেমের ফলস্বরূপ। যদি ফ্লেক্স ধারকের সমস্ত আইটেম এই প্যাটার্নটি ব্যবহার করে তবে তাদের আকারগুলি নির্দিষ্ট ফ্লেক্স ফ্যাক্টরের সাথে সমানুপাতিক হবে।

সুতরাং flex:1সমতুল্যflex: 1 1 0

Comments

আনমন: 1; সমান নমনীয়তা নয়: 1 1 0; নীচে আমার উত্তর দেখুন দেখুন কেন দেখুন।

— ড্রিমটেক

পার্শ্ব-নোটে: আমি মনে করি আপনি যখন flexসমস্ত বাচ্চার ক্ষেত্রে একই ব্যবহার করছেন তখন আসলে কী flex: 1 ? 0;, "কোথায়?" যে কোনও কিছু হতে পারে, এতে কোনও তফাত হবে না

— ফ্লেন করুন

@ ড্রিমটেক কেবলমাত্র ক্রোমের মতো অ-মানক-সম্মতিযুক্ত ব্রাউজারগুলিতে।

— টাইলারএইচ

@ টাইলারএইচ সঠিক এবং আমার উত্তরে উল্লিখিত তবে what does flex:1 mean?তা ব্যাখ্যার জন্য উন্মুক্ত। অপেপ অনুমানের জন্য জিজ্ঞাসা করে না, কেবল কি ঘটছে তার জন্য। দুর্ভাগ্যক্রমে ক্রোম এখন সর্বাধিক জনপ্রিয় ব্রাউজার এবং সমর্থন প্রয়োজন। আমি নিজে ক্রোমের কোনও অনুরাগী বা ব্যবহারকারী নই!

— ড্রিমটেক

@ টাইলার এই কারণেই আমার উত্তরে এটি উল্লেখ করেছে "এটি উল্লেখ করা উচিত যে এটি ব্যর্থ হয়েছে কারণ এই ব্রাউজারগুলি স্পেসিফিকেশন মানতে ব্যর্থ হয়েছে।" অনুমানের সাথে একটি লিঙ্ক!

— ড্রিমটেক

Answer 2

flex: 1 নিম্নলিখিতটির অর্থ:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

Comments

@CookieMonster না, flex: 1মানে 1 1 0... কিন্তু আই ই তে এটি হল1 1 0px

— Ason

@ এলজিসন, ​​আপনি ইউনিটটি ভিত্তিক মান থেকে বাদ দিতে পারেন 1 1 0এবং 1 1 0pxসমান। আইই কেবল এক ইউনিটের সাথে একটিকে সমর্থন করার জন্য ঘটে।

— কুকিমনসটার

@ কুকিমনস্টার আমি জানি ফ্লেক্সবক্স কীভাবে কাজ করে আমি আপনার প্রথম মন্তব্যটি শুধরেছিলাম, যা ভুল।

— আসন

@ এলজিসন, ​​ফ্লেক্স কীভাবে: 1 এর অর্থ 1 1 0 পিক্সেল ভুল 1 1 0pxএবং 1 1 0সমতুল্য?

— কুকিমনসটার

@ কুকিমনস্টার তারা একই রেন্ডার করতে পারে তবে সমতুল্য নয়, যেমন একটি ইউনিটবিহীন মান ব্যবহার করার সময় flex-basis, সামগ্রীটিকে উপেক্ষা করা হয় এবং উপাদানটির আকারটি তার flex-grow/ এর উপর ভিত্তি করে তৈরি করা হয় flex-shrink।

— আসন

Answer 3

সতর্ক হোন

কিছু ব্রাউজারে:

flex:1; নাসমানflex:1 1 0;

flex:1;= flex:1 1 0n;(যেখানে এন দৈর্ঘ্যের একক)।

• আনমন-বেড়ে ওঠে নমনীয়তা বাকী নমনীয় আইটেমগুলির তুলনায় আইটেমটি কতটা বাড়বে তা নির্দিষ্ট করে number
• আনমন-সঙ্কুচিত বাকী নমনীয় আইটেমগুলির তুলনায় আইটেমটি কতটা সঙ্কুচিত হবে তা নির্দিষ্ট করে number
• আনমন-ভিত্তিতে আইটেমের দৈর্ঘ্য। আইনী মান: "অটো", "উত্তরাধিকারী", বা "%", "পিক্স", "এম" বা অন্য কোনও দৈর্ঘ্যের একক দ্বারা অনুসরণ করা একটি নম্বর।

এখানে মূল কথাটি হ'ল ফ্লেক্স-বেসের জন্য একটি দৈর্ঘ্যের ইউনিট প্রয়োজন ।

উদাহরণস্বরূপ ক্রোমে flex:1এবংflex:1 1 0 বিভিন্ন ফলাফল উত্পাদন করে। বেশিরভাগ পরিস্থিতিতে এটি প্রদর্শিত হতে পারে যা flex:1 1 0;কাজ করছে তবে আসুন পরীক্ষা করে দেখুন কী ঘটেছিল:

EXAMPLE টি

ফ্লেক্স ভিত্তিকে উপেক্ষা করা হয় এবং কেবল ফ্লেক্স-গ্রো এবং ফ্লেক্স-সঙ্কুচিত প্রয়োগ করা হয়।

flex:1 1 0;= flex:1 1;=flex:1;

এটি প্রথম নজরে ঠিকঠাকই প্রদর্শিত হতে পারে তবে ধারকটির প্রয়োগকৃত ইউনিটটি নীস্টযুক্ত থাকলে; অপ্রত্যাশিত আশা!

CHROME এ এই উদাহরণটি ব্যবহার করে দেখুন

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

সামঞ্জস্য মূলক

এটি লক্ষ্য করা উচিত যে এটি ব্যর্থ হয়েছে কারণ কিছু ব্রাউজার স্পেসিফিকেশন মেনে চলা ব্যর্থ হয়েছে ।

ব্রাউজারগুলি সম্পূর্ণ ফ্লেক্স স্পেসিফিকেশন ব্যবহার করে:

• ফায়ারফক্স - ✓
• এজ - ✓ (আমি জানি, আমিও হতবাক হয়ে গিয়েছিলাম।)
• ক্রোম - এক্স
• সাহসী - এক্স
• অপেরা - এক্স
• আইই - (হ্যাঁ, এটি দৈর্ঘ্যের ইউনিট ব্যতীত কাজ করে তবে একটি দিয়ে নয়))

---

2019 আপডেট করুন

Chrome এর সর্বশেষ সংস্করণগুলি শেষ পর্যন্ত এই সমস্যাটিকে সংশোধন করেছে বলে মনে হচ্ছে তবে অন্যান্য ব্রাউজারগুলি এখনও তা করতে পারেনি।

পরীক্ষিত এবং ক্রোম ভার 74 এ কাজ করা।

Comments

মান 0 হলে ইউনিট বাধ্যতামূলক হয় না। স্পেসিফিকেশন বলে flex: 1একই flex: 1 1 0। আপনার উদাহরণে যদি আপনি নিয়মে .Wrapশ্রেণিটি সরিয়ে থাকেন তবে .Flex110x,.Flex1, .Flex110, .Wrapপ্রত্যাশার মতো কাজ করে।

দয়া করে একটি লিঙ্ক সরবরাহ করুন, আপনি কী বলছেন তা স্পষ্ট করে দেখতে পেলাম না। আমি কোনও কিছুর উদ্ভাবন করি নি, আমার উত্তরটি ফ্লেক্সবক্সের নির্দিষ্টকরণের উপর ভিত্তি করে

@ অবিসিডিয়ান এখানে লিঙ্কটি দিয়েছেন: w3.org/TR/css-flexbox-1 আপনি 'শর্টহ্যান্ড' এর অংশে গেলে দেখতে পাবেন: "নমনীয়: [ধনাত্মক সংখ্যা] ফ্লেক্সের সমতুল্য: [ধনাত্মক সংখ্যা] 1 0 ...

— মাইকেবি

@ টসকান সর্বাধিক সামঞ্জস্যের জন্য সম্পূর্ণ সিনট্যাক্সটি ব্যবহার করুনflex:1 1 0n;

— ড্রিমটেক

এই পার্থক্যটি দেখানোর জন্য ধন্যবাদ, আমার সমস্যাগুলি কোথা থেকে উদ্ভূত হয়েছিল তা আমি বুঝতে পারি না। কিছু অনুগ্রহ আছে।

— নীট