ফ্লেক্সবক্স উপাদানগুলিকে সমান প্রস্থ দিচ্ছে না

Question

একটি ফ্লেক্সবক্স ন্যাভের চেষ্টা করা হচ্ছে যাতে 5 টি পর্যন্ত আইটেম এবং 3 টি হিসাবে কম হয় তবে এটি সমস্ত উপাদানগুলির মধ্যে সমান প্রস্থকে বিভাজন করে না।

বেহালা

আমি এটির পরে যে টিউটোরিয়ালটি মডেল করছি তা হ'ল http://www.sitepPoint.com/responsive-fluid-width-variable-item-navication-css/

Sass

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

Comments

আপনার টেবিলের মতো একটি মিনিট প্রস্থ দিন এবং ভিডব্লিউ ইউনিটগুলির সাথে প্যাডিং সেট করতে সাহায্য করতে পারে: jsfiddle.net/2nY9N/2 ফ্লেক্স- গ্রোপ ফেলে এবং কেবল ফ্লেক্স করুন: 1; এটি 2 টি অন্যান্য বৈশিষ্ট্যের জন্য খেলাপি মানগুলি ব্যবহার করবে

— জি-সিরিলাস

ফ্লেক্সবক্স ব্যবহার করে কীভাবে বিভাজনকে সমান অংশে জোর করা যায় তার

— গজুস

Answer 1

একটি গুরুত্বপূর্ণ বিট রয়েছে যা নিবন্ধে আপনি লিঙ্ক করেছেন এবং সেটি হ'ল flex-basis। ডিফল্টরূপে flex-basisহয়auto ।

অনুমান থেকে :

নির্দিষ্ট ফ্লেক্স-বেস যদি অটো হয় তবে ব্যবহৃত ফ্লেক্স ভিত্তি হ'ল ফ্লেক্স আইটেমের প্রধান আকারের সম্পত্তিটির মান। (এটি নিজেই কীওয়ার্ড অটো হতে পারে, যা এর বিষয়বস্তুর উপর ভিত্তি করে ফ্লেক্স আইটেমটির আকার দেয়))

প্রতিটি ফ্লেক্স আইটেমের একটি flex-basisএর প্রাথমিক আকারের মতো সাজানো থাকে। তারপরে সেখান থেকে, অবশিষ্ট যে কোনও মুক্ত স্থান flex-growআইটেমগুলির মধ্যে আনুপাতিকভাবে (ভিত্তিতে ) বিতরণ করা হয় । এর সাথে auto, সেই ভিত্তিটি হ'ল সামগ্রীগুলির আকার (বা এর সাথে সংজ্ঞায়িত আকার widthইত্যাদি)। ফলস্বরূপ, এর মধ্যে বড় পাঠ্যযুক্ত আইটেমগুলিকে আপনার উদাহরণে সামগ্রিকভাবে আরও স্থান দেওয়া হচ্ছে।

আপনি যদি চান যে আপনার উপাদানগুলি সম্পূর্ণ সমান হয়, আপনি সেট করতে পারেন flex-basis: 0। এটি নমনীয় ভিত্তিকে 0 তে সেট করবে এবং তারপরে যে কোনও অবশিষ্ট স্থান (যা সমস্ত স্থান হবে যেহেতু সমস্ত ভিত্তি 0 হয়) এর ভিত্তিতে আনুপাতিকভাবে বিতরণ করা হবে flex-grow।

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

অনুমান থেকে এই চিত্র পয়েন্টটি বর্ণনা করার জন্য বেশ ভাল কাজ করে।

এবং এখানে আপনার কোলাহল সহ একটি কার্যকারী উদাহরণ ।

Comments

এটি আমার সাফারিতে মোড়ক করে দেয়।

— স্নোম্যান

এই উত্তর সম্পর্কে দুর্দান্ত জিনিসটি হ'ল আপনি আক্ষরিকভাবে পুরো ইন্টারনেটের চেয়ে অন্য কোথাও এই উদাহরণটির সাথে ফ্লেক্স-বেসকে আরও ভাল ব্যাখ্যা করেছেন। আপনাকে সম্মানজনক অধ্যাপক দেওয়ার বিষয়ে আমি এমআইটির সাথে যোগাযোগ করতে যাচ্ছি।

— দুদেওয়াদ

শুধু যে উল্লেখ করতে flex: 1;হয় সংযুক্তির জন্য সাধারণভাবে সংক্ষেপে flex-grow: 1, flex-basis: 0।

— ভাদিম ওভচিনিকভ

যদি কেউ গভীরতার সাথে জানতে চান তবে ওয়েবে এই দুর্দান্ত নিবন্ধটি আমি পেয়েছি: css-tricks.com/flex-grow-is-Wird

— কুলদীপ কুমার

ওহ মানুষ, আমি যখন সিএসএস আঁকড়ে ধরেছিলাম তখন আমাকে সর্বদা মাথায় আঘাত করে।

— ইবলিক

Answer 2

ব্যবহার করে সমান প্রস্থ সহ উপাদান তৈরি করতে Flex, আপনার সন্তানের সাথে সেট করা উচিত (ফ্লেক্স উপাদান):

flex-basis: 25%;
flex-grow: 0;

এটি 25% প্রস্থের সারিতে থাকা সমস্ত উপাদানকে দেবে। সেগুলি বড় হয়ে একের পর এক চলবে না।

Comments

এটি পুরোপুরি ফ্লেক্সের সুবিধা হ্রাস করার কারণে এটি বেশ বিশ্রী। আপনি যদি নিজের কলামের আকারকে হার্ডকোড করতে যান তবে জিনিসগুলি সমাধান করার সহজ উপায় রয়েছে।

— ক্লোর

এটি মোটেও ভুল নয় .. যদি আপনি একই দৈর্ঘ্যের বাক্সগুলি রাখতে চান এবং সারি পুরোপুরি দখল করা হয় তখন ভেঙে যায় .. আপনি সহজেই এটি অর্জন করতে পারেন। আপনার যদি ন্যূনতম প্রস্থের প্রয়োজন হয় তবে ন্যূনতম

— প্রস্থও

@ ক্লোয়ার আপনি বলছেন যে এটি ফ্লেক্সবক্সগুলির একমাত্র উপকারের মতো ... যখন আপনার সমান প্রস্থের প্রয়োজন হয়, যেমন প্রতিক্রিয়াশীলতার জন্য তারা অবশ্যই উপকারী হতে পারে। এছাড়াও, এটি ফ্লেক্সবক্সগুলি সহজ নয় বলে নয়?

— ব্যবহারকারী 2999349