একটি ফ্লেক্স আইটেম ডান ভাসা করা

Question

আমার আছে একটি

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

পিতামাতার আছে

.parent {
    display: flex;
}

আমার প্রথম সন্তানের জন্য, আমি কেবল ডানদিকে আইটেমটি ভাসাতে চাই।

এবং আমার অন্যান্য ডিভগুলি পিতামাতার দ্বারা নির্ধারিত ফ্লেক্স নিয়মটি অনুসরণ করতে।

এটি কি কিছু সম্ভব?

যদি তা না হয় তবে আমি কীভাবে float: rightআন্ডার ফ্লেক্স করব?

Answer 1

আপনি ফ্লেক্স পাত্রেfloat অভ্যন্তর ব্যবহার করতে পারবেন না এবং এর কারণ হ'ল এখানে আপনি দেখতে পাচ্ছেন যে ফ্ল্যাট সম্পত্তিটি ফ্লেক্স-স্তরের বাক্সগুলিতে প্রয়োগ হয় না ।Fiddle

সুতরাং আপনি যদি childউপাদানটিকে ডানদিকে ডানদিকে অবস্থান করতে চান তবে আপনি parentব্যবহার করতে পারেন margin-left: autoতবে এখন childউপাদানটি অন্যকে divডানদিকে ঠেলে দেবে যেমন আপনি এখানে দেখতে পাচ্ছেন Fiddle।

আপনি এখন যা করতে পারেন তা হ'ল উপাদানগুলির ক্রম পরিবর্তন order: 2করুন এবং childউপাদানটি সেট করুন যাতে এটি দ্বিতীয় বিভাজনকে প্রভাবিত করে না

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}

<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

Comments

ধন্যবাদ আমি প্রথম সমাধানটি একবার দেখে নিতে পারি। আমি প্রদর্শনটি ব্যবহার করতে চাই না: আমার অন্যান্য বাচ্চাদের মতো পরম্পরাটি প্রথম সন্তানের অধীনে থাকা উচিত নয়।

— ঝেন লিউ

" ফ্লোটগুলি ফ্লেক্স পাত্রে প্রবেশ করতে পারে না "। এটি সত্য, তবে এটি কারণ নয়। কারণটি হ'ল floatসম্পত্তি নমনীয় স্তরের বাক্সগুলিতে প্রয়োগ হয় না।

— ওরিওল

এটি কাজ করে, আপনাকে ধন্যবাদ! কেন justify-self: end;(বা অনুরূপ কিছু) সন্তানের পক্ষে কাজ করে না? এটি একটি ফ্লেক্সবক্স সমস্যার একটি অত-নমনীয় সমাধানের মতো বলে মনে হচ্ছে।

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

@ ব্র্যাডিডাউলিং আমি জানি এটি একটি দেরিতে জবাব, তবে ন্যায্যতা স্ব-স্বরূপের জন্য প্রদর্শনটি একটি গ্রিডে সেট করা দরকার। ফ্লেক্সবাক্স ন্যায়সঙ্গত-স্ব: উপেক্ষা করবে। এখানে দেখুন: developer.mozilla.org/en-US/docs/Web/CSS/justify-self

— পল

<ডিভ> অন্য শিশু </ ডিভ> <ডি ক্লাস = "শিশু"> পিতামাতাকে উপেক্ষা করবেন? </div> আপনি দুটি

— বিভাজনটি

Answer 2

আপনার ভাসা চলবে না। প্রকৃতপক্ষে, তারা অকেজো কারণ ফ্লেক্সবক্সে ফ্লোটগুলি উপেক্ষা করা হয় ।

আপনার সিএসএস পজিশনিংয়েরও দরকার নেই।

বিভিন্ন ফ্লেক্স পদ্ধতি উপলব্ধ। autoমার্জিন অন্য উত্তরে উল্লেখ করা হয়েছে ।

এখানে আরও দুটি বিকল্প রয়েছে:

• ব্যবহার justify-content: space-betweenএবং orderসম্পত্তি।
• justify-content: space-betweenডিভসের ক্রমটি ব্যবহার করুন এবং বিপরীত করুন।

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}

<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>