বিবেচনা flex-direction
আপনার প্রশ্নটি পড়ার সময় প্রথম যে বিষয়টি মনে আসে তা হ'ল এটি flex-basisসর্বদা প্রযোজ্য নয় width।
কখন flex-directionহয় row, flex-basisপ্রস্থ নিয়ন্ত্রণ করে।
কিন্তু যখন flex-directionহয় column, flex-basisউচ্চতা নিয়ন্ত্রণ করে।
মূল পার্থক্য
এখানে flex-basisএবং width/ এর মধ্যে কয়েকটি গুরুত্বপূর্ণ পার্থক্য রয়েছে height:
flex-basisশুধুমাত্র ফ্লেক্স আইটেমগুলিতে প্রযোজ্য। ফ্লেক্স পাত্রে (এটি ফ্লেক্স আইটেমও নয়) উপেক্ষা করবে flex-basisতবে ব্যবহার করতে পারে widthএবং height।
flex-basisশুধুমাত্র মূল অক্ষে কাজ করে। উদাহরণস্বরূপ, যদি আপনি আছেন flex-direction: column, widthসম্পত্তি অনুভূমিকভাবে আনমন আইটেম নির্ধারন জন্য প্রয়োজন হবে।
flex-basisএকেবারে অবস্থানযুক্ত ফ্লেক্স আইটেমগুলির উপর কোনও প্রভাব ফেলেনি। widthএবং heightসম্পত্তি প্রয়োজন হবে। একেবারে অবস্থানযুক্ত ফ্লেক্স আইটেমগুলি ফ্লেক্স বিন্যাসে অংশ নেয় না ।
ব্যবহারের flexসম্পত্তি, তিন বৈশিষ্ট্য - flex-grow, flex-shrinkএবং flex-basis- সুন্দরভাবে এক ঘোষণা একত্রিত করা যেতে পারে। ব্যবহার করে width, একই নিয়মে কোডের একাধিক লাইনের প্রয়োজন হবে।
ব্রাউজার আচরণ
কিভাবে তারা দেখা যায় নিরিখে সেখানে উচিত কোন পার্থক্য মধ্যে flex-basisএবং width, যদি না flex-basisহয় autoবা content।
অনুমান থেকে:
7.2.3। flex-basisসম্পত্তি
autoএবং ব্যতীত সমস্ত মানগুলির জন্য content, অনুভূমিক লেখার মোডগুলির flex-basisমতোই সমাধান করা হয় width।
কিন্তু এর প্রভাব autoবা contentন্যূনতম বা এ সব কিছুই হতে পারে। অনুমান থেকে আরও:
auto
কোনও ফ্লেক্স আইটেমের উপরে নির্দিষ্ট করা হলে, autoকীওয়ার্ডটি ব্যবহৃত আকারের প্রধান মানের সম্পত্তি পুনরুদ্ধার করে flex-basis। যদি সেই মানটি নিজেই হয় autoতবে ব্যবহৃত মান content।
content
ফ্লেক্স আইটেমের সামগ্রীর উপর ভিত্তি করে স্বয়ংক্রিয় আকারের আকার নির্ধারণ করে।
দ্রষ্টব্য: এই মানটি নমনীয় বক্স লেআউটটির প্রাথমিক প্রকাশে উপস্থিত ছিল না এবং সুতরাং কিছু পুরানো বাস্তবায়ন এটি সমর্থন করবে না। এর autoপ্রধান আকারের ( widthবা height) একসাথে ব্যবহার করে সমতুল্য প্রভাব অর্জন করা যায় auto।
সুতরাং, বৈশিষ্ট অনুযায়ী flex-basisএবং widthসমাধান অভিন্নরুপে, যদি না flex-basisহয় autoবা content। এই জাতীয় ক্ষেত্রে, flex-basisসামগ্রীর প্রস্থ ব্যবহার করতে পারে (যা সম্ভবত, widthসম্পত্তিটিও ব্যবহার করবে)।
flex-shrinkগুণক
একটি ফ্লেক্স ধারকটির প্রাথমিক সেটিংস মনে রাখা গুরুত্বপূর্ণ। এর মধ্যে কয়েকটি সেটিংস অন্তর্ভুক্ত:
flex-direction: row - ফ্লেক্স আইটেমগুলি অনুভূমিকভাবে প্রান্তিককরণ করবেjustify-content: flex-start - ফ্লেক্স আইটেমগুলি মূল অক্ষের লাইনের শুরুতে স্ট্যাক করবেalign-items: stretch - ফ্লেক্স আইটেমগুলি ধারকটির ক্রস-আকার কভার করতে প্রসারিত হবেflex-wrap: nowrap - নমনীয় আইটেমগুলি একক লাইনে থাকতে বাধ্য হয়flex-shrink: 1 - একটি ফ্লেক্স আইটেম সঙ্কুচিত করার অনুমতি দেওয়া হয়
শেষ সেটিংস নোট করুন।
যেহেতু ফ্লেক্স আইটেমগুলিকে ডিফল্টরূপে সঙ্কুচিত করার অনুমতি দেওয়া হয় (যা তাদের পাত্রে উপচে পড়া থেকে বাধা দেয়), নির্দিষ্ট flex-basis/ width/ heightওভাররাইড হতে পারে।
উদাহরণস্বরূপ, flex-basis: 100pxবা width: 100px, এর সাথে মিলিতভাবে flex-shrink: 1অগত্যা 100px হবে না।
নির্দিষ্ট প্রস্থ রেন্ডার করতে - এবং এটি স্থির রাখতে - আপনাকে সঙ্কুচিত করতে অক্ষম করতে হবে:
div {
width: 100px;
flex-shrink: 0;
}
অথবা
div {
flex-basis: 100px;
flex-shrink: 0;
}
অথবা, স্পেক দ্বারা প্রস্তাবিত হিসাবে:
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
7.2। নমনীয়তার উপাদান
লেখক ব্যবহার নিয়ন্ত্রণ নমনীয়তা করার পরামর্শ দেওয়া হয় flexসরাসরি তার longhand করতে properties সহযোগে বদলে সাধারণভাবে সংক্ষেপে, যেমন সাধারণভাবে সংক্ষেপে সঠিকভাবে কোনো অনির্দিষ্ট উপাদান রিসেট মিটমাট সাধারণ ব্যবহার ।
ব্রাউজার বাগ
কিছু ব্রাউজারের নেস্টেড ফ্লেক্স পাত্রে ফ্লেক্স আইটেম আকার দিতে সমস্যা হয়।
flex-basisনেস্টেড ফ্লেক্স পাত্রে উপেক্ষা করা। widthকাজ করে।
ব্যবহার করার সময় flex-basis, ধারকটি তার বাচ্চাদের আকার পরিবর্তন করে এবং শিশুরা পাত্রে উপচে পড়ে। তবে widthসম্পত্তি সহ, ধারকটি তার বাচ্চাদের আকারকে সম্মান করে এবং সেই অনুযায়ী প্রসারিত হয়।
তথ্যসূত্র:
উদাহরণ:
আইটেমগুলি ব্যবহার করে flex-basisএবং white-space: nowrapওভারফ্লো inline-flexধারক। widthকাজ করে।
মনে হয় যে কোনও ফ্লেক্স পাত্রে কোনও ভাইবোনকে রেন্ডার করার সময় কোনও শিশু inline-flexসনাক্ত করতে পারে না (যদিও এটি কেবল অপরিজ্ঞাত প্রস্থের আইটেম হতে পারে)। আইটেমগুলি সমন্বিত করতে ধারকটি প্রসারিত হয় না।flex-basiswhite-space: nowrap
কিন্তু যখন widthসম্পত্তিটি পরিবর্তে ব্যবহৃত হয় flex-basis, ধারকটি তার বাচ্চাদের আকারকে সম্মান করে এবং সেই অনুযায়ী প্রসারিত হয়। আইই 11 এবং এজতে এটি কোনও সমস্যা নয়।
তথ্যসূত্র:
উদাহরণ:
flex-basis(এবং flex-grow) টেবিল উপাদান কাজ করে না
তথ্যসূত্র:
flex-basisযখন পিতামহু পাত্রগুলি সঙ্কুচিত-থেকে-ফিট উপাদান হিসাবে ক্রোম এবং ফায়ারফক্সে ব্যর্থ হয়। এজ এজেটে ঠিকঠাক কাজ করে।
উপরের লিঙ্কে উপস্থাপিত উদাহরণের মতো, জড়িত position: absoluteথাকা floatএবং এর ব্যবহারও inline-blockএকই ত্রুটিযুক্ত আউটপুট ( jsfiddle ডেমো ) রেন্ডার করবে ।
IE 10 এবং 11 কে প্রভাবিত করছে: