বাক্সটি পূরণ করুন বাকী * অনুভূমিক * স্থানটি ফ্লেক্সবক্সে করুন

Question

আমি একটি ফ্লেক্সবক্সে পাশাপাশি পাশাপাশি 2 টি ডিভস। ডান হাতের একটি সর্বদা একই প্রস্থ হওয়া উচিত এবং আমি চাই বাম হাতের একটিটি কেবল অবশিষ্ট স্থানটি দখল করুক। তবে আমি বিশেষত এর প্রস্থ নির্ধারণ না করা পর্যন্ত তা হবেনা।

সুতরাং এই মুহুর্তে, এটি 96% এ সেট করা হয়েছে যা আপনার স্ক্রিনটি সত্যিই স্কোয়াশ না করা অবধি ঠিক মনে হচ্ছে - তারপরে ডান হাতের ডিভটি প্রয়োজনীয় জায়গার চেয়ে খানিকটা অনাহার পেয়ে যাবে।

আমি অনুমান করি যে আমি এটি যেমনটি রেখেছি তেমনি এটি ভুল অনুভব করে - যেমন বলার উপায় আছে:

ডানটি সর্বদা একই থাকে; আপনি বাম দিকে - আপনি যা বাকি আছে তা পেয়ে যান

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>

Answer 1

flex-growকোনও ফ্লেক্স আইটেমটি মূল অক্ষের ফাঁকা জায়গার ব্যবহার করতে সম্পত্তিটি ব্যবহার করুন ।

এই বৈশিষ্ট্যটি আইটেমটিকে যথাসম্ভব প্রসারিত করবে, গতিশীল পরিবেশে দৈর্ঘ্যকে সামঞ্জস্য করবে যেমন স্ক্রীন পুনরায় আকার নির্ধারণ বা অন্য আইটেমগুলির যোগ / অপসারণ।

flex-grow: 1শর্টহ্যান্ড সম্পত্তি ব্যবহার করে, সাধারণ উদাহরণ flex: 1।

সুতরাং, width: 96%আপনার ডিভ পরিবর্তে ব্যবহার করুন flex: 1।

---

তুমি লিখেছিলে:

সুতরাং এই মুহুর্তে, এটি 96% এ সেট করা হয়েছে যা আপনার স্ক্রিনটি সত্যিই স্কোয়াশ না করা অবধি ঠিক মনে হচ্ছে - তারপরে ডান হাতের ডিভটি প্রয়োজনীয় জায়গার চেয়ে খানিকটা অনাহার পেয়ে যাবে।

স্থির-প্রস্থ ডিভের স্কোয়াশিং অন্য ফ্লেক্সের সম্পত্তি সম্পর্কিত: flex-shrink

ডিফল্টরূপে, ফ্লেক্স আইটেমগুলি সেট করা হয় flex-shrink: 1যা ধারকটির ওভারফ্লো রোধ করতে তাদের সঙ্কুচিত করতে সক্ষম করে।

এই বৈশিষ্ট্যটির ব্যবহারটি অক্ষম করতে flex-shrink: 0।

আরো বিস্তারিত জানার জন্য দেখুন ফ্যাক্টর উত্তর এখানে অধ্যায়:flex-shrink

• ফ্লেক্স-ভিত্তি এবং প্রস্থের মধ্যে পার্থক্য কী?

---

মূল অক্ষ বরাবর ফ্লেক্স প্রান্তিককরণ সম্পর্কে আরও জানুন :

• সিএসএস ফ্লেক্সবক্সে কেন কোনও "ন্যায়সঙ্গত আইটেম" এবং "ন্যায্যতা স্বরূপ" বৈশিষ্ট্য নেই?

ক্রস অক্ষ বরাবর ফ্লেক্স প্রান্তিককরণ সম্পর্কে আরও জানুন :

• প্রান্তিককরণ-স্ব, সারিবদ্ধ-আইটেমগুলি এবং সারিবদ্ধকরণের সাথে কীভাবে ফ্লেক্স-মোড়ক কাজ করে?

Comments

আমার একই অবস্থা flex-grow: 1ছিল এবং ব্যবহারের চেয়ে একই রকম প্রভাব পড়েনি flex: 1। আপনি কি জানেন যে এটি আলাদা কেন? (আমি আমার সমস্যাটি

— উত্তরোত্তর, থেক্স

এর সাথে flex-grow: 1, flex-basisসম্পত্তিটি autoতার ডিফল্ট মান অবধি রয়েছে । সাথে flex: 1, flex-basisসম্পত্তি পরিবর্তন হয় 0। এখানে একটি মধ্যে গভীরতা পর্যালোচনার জন্য আমার উত্তর দেখুন: stackoverflow.com/q/43520932/3597276 @WhGandalf

— মাইকেল বেঞ্জামিন

আমার জন্য ফ্লেক্স-

— সঙ্কোচনের

Answer 2

মূলত আমি উভয় পক্ষের সামগ্রীতে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে (আমার ক্ষেত্রে, একটি বিন্দুযুক্ত রেখার বিভাজক) আমার কোডটি একটি 'সারি'র মাঝারি বিভাগে রাখার চেষ্টা করছিলাম। @ মিশেল_বি প্রস্তাবিত মত, কীটি display:flexসারিটির ধারকটিতে ব্যবহার করছে এবং কমপক্ষে নিশ্চিত করা হচ্ছে যে আপনার মধ্যবর্তী পাত্রে flex-growবাইরের পাত্রে কমপক্ষে 1 টির মান রয়েছে (যদি বাইরের পাত্রে কোনও flex-growবৈশিষ্ট্য প্রয়োগ করা না থাকে তবে মাঝারি ধারক শুধুমাত্র 1 এর জন্য প্রয়োজন flex-grow)।

আমি কী করতে চেষ্টা করছিলাম তার একটি চিত্র এবং আমি কীভাবে এটি সমাধান করেছি তার নমুনা কোড's

সম্পাদনা করুন: আপনার ব্রাউজারটি এটি কীভাবে প্রদর্শিত হয় তার উপর নির্ভর করে ডটেড নীচের সীমানাটি সম্ভবত অদ্ভুত দেখাবে। আমি ব্যক্তিগতভাবে একটি কালো বৃত্ত এসভিজিটি পুনরাবৃত্তি ব্যাকগ্রাউন্ড চিত্র হিসাবে ব্যবহার করার পরামর্শ দেব, সঠিকভাবে আকারের এবং মাঝারি ধারকটির নীচে অবস্থিত। আমি সময় পেলে এই বিকল্প সমাধানটি যুক্ত করব।

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}

<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>