একই আকারে ফ্লেক্সবক্স আইটেমগুলি কীভাবে তৈরি করবেন?

Question

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

উদাহরণ স্বরূপ:

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

প্রথম আইটেমটি দ্বিতীয়টির চেয়ে অনেক বড়। আমার কাছে যদি 3 টি আইটেম, 4 আইটেম বা এন আইটেম থাকে তবে আমি চাই যে সেগুলি সমস্ত আইটেম প্রতি সমান পরিমাণে একই লাইনে উপস্থিত হয়।

কোন ধারনা?

http://codepen.io/anon/pen/gbJBqM

Answer 1

এগুলি সেট করুন যাতে তাদের flex-basisহয় 0(সুতরাং সমস্ত উপাদানগুলির একই প্রারম্ভিক বিন্দু থাকে) এবং তাদের বাড়তে দিন:

flex: 1 1 0px

আপনার আইডিই বা লিটারে এটি উল্লেখ করা যেতে পারে the unit of measure 'px' is redundant। যদি আপনি এটিকে ছেড়ে দেন (যেমন flex: 1 1 0:), আইই এটিকে সঠিকভাবে রেন্ডার করবে না। সুতরাং pxইন্টারনেট এক্সপ্লোরারকে সমর্থন করা প্রয়োজন, যেমন @ ফ্যাবব মন্তব্য করেছেন;

Comments

এটি লক্ষ করা উচিত যে flexসম্পত্তিটি সম্পত্তি flex-grow, flex-shrinkএবং সম্পত্তিগুলির জন্য একটি শর্টহ্যান্ড সম্পত্তি flex-basis। স্বতন্ত্র বৈশিষ্ট্যগুলির উপর শর্টহ্যান্ড ব্যবহার করার পরামর্শ দেওয়া হয় কারণ শর্টহ্যান্ড সঠিকভাবে সাধারণ ব্যবহারগুলিকে সামঞ্জস্য করতে কোনও অনির্দিষ্ট উপাদানকে পুনরায় সেট করে। প্রাথমিক মান হয় 0 1 auto।

— j08691

নোট করুন যে আইই ১১ ইউনিটহীন ফ্লেক্স-ভিত্তিক মানগুলি উপেক্ষা করে: github.com/philipwalton/flexbugs#flexbug-4

— ফাব

min-width: 0উপচে পড়া পাঠ্য সহ শিশু উপাদানগুলি ব্যবহার করতে আমাকে যুক্ত করতে হয়েছিল। দেখুন css-tricks.com/flexbox-truncated-text

— Iwazaru

Answer 2

আপনি flex-basis: 100%এটি অর্জন করতে যোগ করতে পারেন ।

আপডেট করা উদাহরণ

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

এটি মূল্যবান জন্য, আপনি flex: 1একই ফলাফলের জন্যও ব্যবহার করতে পারেন ।

এর শর্টহ্যান্ড flex: 1একই flex: 1 1 0, যা সমান:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

Comments

এটি সঠিক নয়। ডিফল্ট ফ্লেক্স মান flex: 0 1 auto। যার অর্থ সেটিং এর flex: 1ফলাফল হবে flex: 1 1 auto। এটি কাজ করবে না। সঠিক উত্তরটি flex: 1 1 0উপরে অ্যাডামের দ্বারা বর্ণিত হিসাবে বলা হয়েছে

— r.sendecky

@ r.sendecky না, আপনিই সেই ব্যক্তি যা ভুল। যেমনটি আমি আমার উত্তরে বলেছি, flex: 1ফলাফলগুলির সংক্ষিপ্তরূপে আপনি দাবি করছেন flex: 1 1 0 না not 'ফ্লেক্স শর্টহ্যান্ড' বিভাগেরflex: 1 1 auto অধীনে অফিসিয়াল ডাব্লু 3 স্পেসিফিকেশনটি একবার দেখুন : যখন "ফ্লেক্স শর্টহ্যান্ড থেকে বাদ দেওয়া হয়, তখন তার নির্দিষ্ট মান হয় " না । র্যান্ডম ডাউনভোটের জন্য ধন্যবাদ flex-basis0auto

— জোশ ক্রোজিয়ার

@ r.sendecky - এছাড়াও, তারতম্যগুলি কল্পনা করতে আমি তৈরি করা এই উদাহরণটি একবার দেখুন ।

— জোশ ক্রোজিয়ার

সাথী, আমি ডাউন-ভোট এলোমেলো করি না। আমি লেখার আগে পরীক্ষা করি। এবং আমি এটি পরীক্ষা করেছিলাম। আপনার উত্তর কাজ করে না - হিসাবে সহজ। আমার ঠিক একই সমস্যাটি ছিল খুব আগে খুব আগে flex: 1এবং এর সাথে flex-direction: column। বাচ্চাদের মধ্যে অন্যান্য উপাদান স্থাপন করা হলে বাচ্চাদের উচ্চতা এক ছিল না। কেবলমাত্র এটি স্থির করে দিচ্ছিল flex: 1 1 0। এটি এখনও ক্রোমিয়াম 55.0.2883.87

— r.sendecky

@ জোশক্রোজায়ার নিশ্চিত flex: 1করেছেন যে এর একই আচরণ রয়েছে flex: 1 1 0এবং flex: 0 1 autoএর আচরণও আলাদা।

— ইভান ডার্স

Answer 3

width: 0আইটেমগুলির বিষয়বস্তু যদি এটি আরও বড় হয় তবে আপনাকে কলামগুলি সমান করতে যুক্ত করতে হবে।

.item {
  flex: 1 1 0;
  width: 0;
}

Comments

এটি প্রয়োজনীয় বলে মনে হয় যদি .itemকারণের বিষয়বস্তুগুলি .itemপ্রাকৃতিকভাবে তার চেয়ে আরও বেশি বাড়তে থাকে।

— বুঙ্গল

আমি মনে করি আপনি এর flex: 1 1 0;পরিবর্তেflex-grow: 1 1 0;

— চিকেন স্যুপ

fyi, লিঙ্কটি নষ্ট হয়েছে

— ববি জ্যাক

সেটিং flex-basisথেকে 0সেটিং হিসাবে একই উদ্দেশ্য করে তোলে widthকরতে 0।

— স্টিফেন

আমার ব্যবহারের ক্ষেত্রে, আমি চার্ট মোড়ানো ছিল যা তাদের পিতামাতার আকার এবং প্রস্থ 0 এর সাথে গতিশীলভাবে সামঞ্জস্য করে তাদের কাজ করার জন্য প্রয়োজনীয়। আমি নিশ্চিত নই যে তারা কীভাবে যথাযথ প্রস্থ নির্ধারণ করছিল, তবে ফ্লেক্স ভিত্তিতে অবশ্যই ক্রোম 72 (প্রকাশিত জানুয়ারী 2019) এ কাজ করেনি।

— অ্যান্ডি গ্রাফ

Answer 4

অ্যাডামের গৃহীত উত্তর (flex: 1 1 0 ফ্লেক্সবক্স ধারকগুলির জন্য পুরোপুরি কাজ করে যার প্রস্থ হয় স্থির, বা পূর্বপুরুষ দ্বারা নির্ধারিত। বাচ্চাদের পাত্রে ফিট করার মতো পরিস্থিতি।

যাইহোক, আপনার এমন একটি পরিস্থিতি থাকতে পারে যেখানে আপনি চান সন্তানের সাথে সবচেয়ে বড় আকারের উপর ভিত্তি করে শিশুদের সমান আকারের ধারক বাচ্চাদের ফিট করে। আপনি একটি ফ্লেক্সবক্স ধারক তার বাচ্চাদের দ্বারা এটি ফিট করতে পারেন:

• সেটিং position: absoluteএবং সেটিং widthবা না right, বা
• এটি একটি মোড়কের ভিতরে রাখুন display: inline-block

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

সমাধানটি হ'ল ফ্লেক্সবক্সের পরিবর্তে গ্রিড ব্যবহার করা।

ডেমো: https://codepen.io/brettdonal/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

Answer 5

আমি ফ্লেক্সের সাথে বিশেষজ্ঞ নই তবে আমি যে দুটি আইটেমের সাথে লেনদেন করছি তার জন্য 50% ভিত্তি স্থাপন করে আমি সেখানে পৌঁছেছি। 1 এ বৃদ্ধি এবং 0 এ সঙ্কুচিত করুন।

ইনলাইন স্টাইলিং: flex: '1 0 50%',