টানা থেকে ফ্লেক্স আইটেম প্রতিরোধ করুন

Question

নমুনা:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

আমার দুটি প্রশ্ন আছে, দয়া করে:

1. মূলত এটি কেন ঘটে span?
2. নমনীয় পাত্রে অন্যান্য ফ্লেক্স আইটেমগুলিকে প্রভাবিত না করে এটিকে প্রসারিত করা থেকে রোধ করার সঠিক পদ্ধতির কী?

Answer 1

আপনি দৈর্ঘ্য দৈর্ঘ্য প্রসারিত করতে চান না?
ধারকটির পূর্ণ উচ্চতা প্রসারিত না করার জন্য আপনার এক বা একাধিক ফ্লেক্স-আইটেমগুলিকে প্রভাবিত করার সম্ভাবনা রয়েছে।

ধারকটির সমস্ত ফ্লেক্স-আইটেমগুলি প্রভাবিত করতে, এটি চয়ন করুন:
আপনাকে সেটalign-items: flex-start;করতে হবেdivএবং এই ধারকটির সমস্ত ফ্লেক্স-আইটেমগুলি তাদের সামগ্রীর উচ্চতা অর্জন করবে।

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

শুধুমাত্র একটি একক ফ্লেক্স-আইটেমকে প্রভাবিত করতে, এটি চয়ন করুন:
আপনি যদি ধারকটিতে একটি একক ফ্লেক্স-আইটেমটি আনসার্ট করতে চান, আপনাকেalign-self: flex-start;এই ফ্লেক্স-আইটেমটিসেটকরতে হবে। ধারকটির অন্যান্য সমস্ত ফ্লেক্স-আইটেম প্রভাবিত হয় না।

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}

<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

কেন এমন হচ্ছে span?
সম্পত্তি ডিফল্ট মান align-itemsহল stretch। এই কারণে spanউচ্চতা পূরণ করুন div।

baselineএবং এর মধ্যে পার্থক্য flex-start?
বিভিন্ন ফন্ট-আকারের সাথে আপনার যদি ফ্লেক্স-আইটেমগুলিতে কিছু পাঠ্য থাকে তবে আপনি প্রথম রেখার বেসলাইনটি উল্লম্বভাবে আইটেমটি স্থাপন করতে পারেন। একটি ছোট ফন্ট-আকারযুক্ত একটি ফ্লেক্স-আইটেমের ধারকটির মধ্যে এবং শীর্ষে নিজেই কিছু জায়গা থাকে। সঙ্গে flex-startআনমন-আইটেম (স্থান ছাড়া) ধারক শীর্ষে সেট করা হবে।

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}

<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

আপনি এখানে baselineএবং পার্থক্য সম্পর্কে আরও তথ্য পেতে পারেন flex-start:
ফ্লেক্স-স্টার্ট এবং বেসলাইন মধ্যে পার্থক্য কি?

Comments

উত্তরের জন্য ধন্যবাদ, তবে এটি সমস্ত ফ্লেক্স আইটেমগুলিকে প্রভাবিত করে। এবং একটি প্রশ্ন: মান baselineএবং flex-startমানগুলির মধ্যে পার্থক্য কী ? তাদের ফলাফল একই বলে মনে হচ্ছে। এগুলি কি কোনও পরিস্থিতিতে আলাদা হতে পারে?

— মরি

দুর্দান্ত মনে হচ্ছে! আমি যদি কৃতজ্ঞ থাকি যদি আপনি আমাকে baselineএবং flex-startমানগুলির মধ্যে পার্থক্যটিও জানান ।

— মোরি

মধ্যে পার্থক্য কি baselineএবং flex-start?

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

টিপ: আপনি যদি তাদের অনুভূমিকভাবে সারিবদ্ধ করতে চান তবে কেবল ব্যবহার করুন align-items: center;:)

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

# হ্যাক: একটি নতুন ডিভ দিয়ে আপনার উপাদান মোড়ানো। এটি নতুন পিতামাতাকে ভাগ করে দেবে এবং আপনার উপাদানটিকে অদৃশ্য রাখবে।

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