কীভাবে একটি একক ফ্লেক্সবক্স আইটেমকে ন্যায়সঙ্গত করা যায় (জাস্টিফাইটি-কনটেন্টকে ওভাররাইড করুন)

Question

আপনি ওভাররাইড করতে পারে align-itemsসঙ্গে align-selfএকটি আনমন আইটেমের জন্য। আমি justify-contentকোনও ফ্লেক্স আইটেমটির জন্য ওভাররাইড করার উপায় খুঁজছি ।

আপনার যদি একটি ফ্লেক্সবক্স ধারক থাকে justify-content:flex-endতবে আপনি প্রথম আইটেমটি চান তা justify-content: flex-startকীভাবে সম্ভব?

এটি পোস্টটির মাধ্যমে এটির সর্বোত্তম জবাব দেওয়া হয়েছিল: https://stackoverflow.com/a/33856609/269396

Comments

autoমার্জিন ব্যবহার করুন । # 26 বক্সটি এখানে দেখুন: stackoverflow.com/a/33856609/3597276

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

সর্বাধিক সহায়ক উত্তরের সাথে সংযোগ দেওয়ার জন্য আপনাকে ধন্যবাদ!

— ব্র্যাডি ডাউলিং

Answer 1

বলে মনে হচ্ছে না justify-self, তবে আপনি একই ফলাফল নির্ধারণ marginকরে auto¹ achieve E. g। জন্য flex-direction: row(ডিফল্ট) আপনি সেট করা উচিত margin-right: autoবাঁদিকে শিশু সারিবদ্ধ।

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

Behavior এই আচরণটি ফ্লেক্সবক্স স্পেক দ্বারা সংজ্ঞায়িত করা হয় ।

Comments

এই কৌশলটি দুর্দান্ত এবং এটি উল্লম্ব দিকটিতেও কাজ করে। উদাহরণস্বরূপ, আপনি চান একটি নির্দিষ্ট উচ্চতার ধারকের অভ্যন্তরের শেষ উপাদানটি নীচে আটকে থাকুন। আপনি `` `। কনটেনার {ফ্লেক্স-দিকনির্দেশ: কলাম ব্যবহার করতে পারেন; ন্যায্যতা-বিষয়বস্তু: ফ্লেক্স-স্টার্ট} .সত্ত্ব-আইটেম {মার্জিন-শীর্ষ: স্বয়ংক্রিয়} `` `

— ক্রিশ্চিয়ান শ্লেনস্কার

@ ক্রুলিক এই আচরণটি ফ্লেক্সবক্স স্পেক দ্বারা সংজ্ঞায়িত হয়েছে, দেখুন w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

— পাভলো

আরও কিছু তদন্তের পরে, এর সাথে justify-selfহয়তো কিছু করার নেই flexboxতবে ব্যবহার করা হয়েছে css gridsতবে আমি নিশ্চিত নই। আমি এটি ফ্লেক্সবক্সের সাহায্যে ক্রোমে কাজ করতে পারি বলে মনে হচ্ছে না।

— জ্যাক উইলসন

আমি যদি চাই যে একটি জিনিস বাম দিকে থাকবে এবং অন্যটি কেন্দ্রে থাকবে?

— ফাহমি

"ফ্লেক্সবক্স লেআউটগুলিতে, এই সম্পত্তিটিকে উপেক্ষা করা হবে"

— ফিনলে পার্সি

Answer 2

এএফআইকে চশমাগুলির জন্য এর জন্য কোনও সম্পত্তি নেই, তবে এখানে একটি কৌশল যা আমি ব্যবহার করছি: ধারক উপাদানটি (যার সাথে একটি display:flex) সেট করুন justify-content:space-around তারপরে প্রথম এবং দ্বিতীয় আইটেমের মধ্যে একটি অতিরিক্ত উপাদান যুক্ত করুন এবং এটিতে সেট করুন flex-grow:10(বা কিছু) অন্যান্য মান যা আপনার সেটআপের সাথে কাজ করে)

সম্পাদনা করুন: আইটেমগুলি দৃly়ভাবে সারিবদ্ধ করা থাকলে flex-shrink: 10;অতিরিক্ত উপাদান যুক্ত করা ভাল ধারণা , তাই লেআউটটি ছোট ডিভাইসে সঠিকভাবে প্রতিক্রিয়াশীল হবে।

Comments

এটি প্রস্থ নির্দিষ্ট করে না দিয়ে কাজ করে (কমপক্ষে এটি আমার পরিস্থিতিতে হয়েছিল)

— eeglbalazs

চেষ্টা করুনmin-width: 0

— ডেমবিনস্কি

Answer 3

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

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

অথবা যদি আপনি একই জিনিসটি ফ্লেক্স-স্টার্ট এবং ফ্লেক্স-এন্ড বিপরীত করে ফেলে থাকেন তবে আপনি কেবল ডিফল্ট-ফ্লেক্স ধারক এবং একাকী সন্তানের ক্রমটি স্যুপ করে।

Answer 4

দেখে মনে হচ্ছে justify-selfশীঘ্রই ব্রাউজারগুলিতে আসছে । এমডিএন- তে এটি নিয়ে ইতিমধ্যে একটি নিবন্ধ রয়েছে । এই লেখার সময়, ব্রাউজার সমর্থন দুর্বল।

মার্জিন-সলিউশন সম্পর্কিত: আমার ফাঁক দিয়ে একটি ফ্লেক্সবক্স গ্রিড রয়েছে। flex-gapফ্লেক্সবক্সের সাথে কোনও সম্পত্তি নেই (এখনও?) গিটারগুলির জন্য, আমি প্যাডিংস এবং মার্জিনগুলি ব্যবহার করছি, সুতরাং margin: autoঅন্যান্য মার্জিনগুলি ওভাররাইট করা দরকার ...

Comments

দুঃখের সাথে,In flexbox layouts, this property is ignored

— স্পিনএক্সএক্সএক্স

@ স্পিনএক্সএক্সএক্সএক্স হ্যাঁ, তবে এটি একটি পাত্রে কাজ justify-self করেdisplay: grid । এটা তোলে flexbox মত সাম্প্রতিক, তাই মত ধনী পজিশনিং সম্ভব align-items, align-selfপাশাপাশি এক মত কিছু অতিরিক্ত বৈশিষ্ট্য আমরা এখানে প্রয়োজন নেই, justify-self। আমি যা প্রস্তাব দিচ্ছি তা হ'ল পর্যাপ্ত পরিমাণে ফ্লেক্সবক্স ব্যবহার করা, তবে এতে যদি কিছু অভাব হয় তবে গ্রিড সম্ভবত আপনি যা খুঁজছেন তা সম্ভবত আছে। - (। থেকে মধ্য-x এবং কেন্দ্র-y, ও ডান-এক্স কেন্দ্র-Y আরেকটি উদাহরণ সহজ সমতলতা এক সন্তান flexbox হয়েছে margin-left: autoউদাহরণ সহজ বাম জন্য + + ঠিক আছে, কিন্তু না কেন্দ্র + Right): stackoverflow.com/a/57128453 / 2441655

— ভেনারিক্স

Answer 5

আপনি যে আইটেমগুলির প্রশস্ততা জানতে চান সেই পরিস্থিতিতে flex-endআপনি তাদের ফ্লেক্সটিকে "0 0 ## px" এ সেট করতে পারেন এবং আপনি যে আইটেমটি flex-startদিয়ে চান সেটি সেট করতে পারেনflex:1

এটি সিউডো flex-startআইটেমটি ধারকটি পূরণ করবে, কেবল এটিকে text-align:leftবা যে কোনও কিছুতে এটি ফর্ম্যাট করবে ।

Answer 6

আমি অভ্যন্তরীণ আইটেমের স্টাইলটি সেট করে অনুরূপ কেস সমাধান করেছি margin: 0 auto।
পরিস্থিতি: আমার মেনুতে সাধারণত তিনটি বোতাম থাকে, এক্ষেত্রে তাদের হওয়া দরকার justify-content: space-between। তবে যখন কেবল একটি বোতাম থাকবে তখন এটি এখন বামদিকে পরিবর্তে মাঝখানে প্রান্তিকিত হবে।