নমনীয় আইটেমগুলিকে সামগ্রীর প্রস্থ গ্রহণ করুন, প্যারেন্ট পাত্রে প্রস্থ নয়

Question

আমি একটি ধারক আছে <div>সঙ্গে display: flex। এটি একটি শিশু আছে <a>।

আমি কীভাবে শিশুটিকে "ইনলাইন" উপস্থিত করতে পারি?

বিশেষত, আমি কীভাবে সন্তানের প্রস্থটিকে তার বিষয়বস্তু দ্বারা নির্ধারণ করতে পারি, এবং পিতামাতার প্রস্থে প্রসারিত না করে পারি?

আমি যা চেষ্টা করেছি:

আমি শিশুটিকে সেট করে দিয়েছি display: inline-flex, তবে এটি এখনও পুরো প্রশস্ততা গ্রহণ করেছে। আমি অন্যান্য সমস্ত প্রদর্শন বৈশিষ্ট্যও চেষ্টা করেছিলাম, তবে কিছুই কার্যকর হয়নি।

উদাহরণ:

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

http://codepen.io/donpinkus/pen/YGRxRY

Answer 1

ব্যবহার করুন align-items: flex-startধারক, অথবা align-self: flex-startআনমন আইটেম উপর।

দরকার নেই display: inline-flex।

---

একটি ফ্লেক্স ধারক একটি প্রাথমিক সেটিং হয় align-items: stretch। এর অর্থ হ'ল ক্রস অক্ষের সাথে ধারকটির পুরো দৈর্ঘ্য কভার করার জন্য ফ্লেক্স আইটেমগুলি প্রসারিত হবে।

align-selfসম্পত্তি হিসাবে একই জিনিস আছে align-itemsযে ছাড়া, align-selfপ্রযোজ্য আনমন আইটেম যখন align-itemsপ্রযোজ্য আনমন ধারক ।

ডিফল্টরূপে, align-selfএর মান উত্তরাধিকার সূত্রে প্রাপ্ত হয় align-items।

যেহেতু আপনার ধারকটি হ'ল flex-direction: column, ক্রস অক্ষটি অনুভূমিক, এবং align-items: stretchশিশু উপাদানটির প্রস্থ যতটা সম্ভব প্রসারিত করছে।

আপনি ধারকটিতে align-items: flex-start(যা সমস্ত ফ্লেক্স আইটেম দ্বারা উত্তরাধিকার সূত্রে প্রাপ্ত) বা align-self: flex-startআইটেমের (যা একক আইটেমে আবদ্ধ ) এর সাথে ডিফল্টটিকে ওভাররাইড করতে পারেন ।

---

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

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

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

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

Answer 2

সংযোজনে আপনি align-selfঅটো মার্জিনও বিবেচনা করতে পারেন যা প্রায় একই কাজ করবে

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>