'পজিশন: পরম' ফ্লেক্সবক্সের সাথে দ্বন্দ্ব করে?

Question

আমি divঅন্যান্য উপাদানগুলিতে এবং কেন্দ্রের মধ্যে এর শিশু উপাদানগুলির কোনও প্রভাব ছাড়াই পর্দার শীর্ষে একটি কাঠি বানাতে চাই ।

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

<div class="parent">
  <div class="child">text</div>
</div>

আমি যখন position: absoluteলাইনটি যুক্ত করব তখন justify-content: centerঅবৈধ হয়ে যায়। তারা কি একে অপরের সাথে বিরোধ করে এবং, এর সমাধান কী?

সম্পাদনা

ধন্যবাদ ছেলেরা এটি পিতামাতার প্রস্থের সমস্যা। তবে আমি প্রতিক্রিয়া নেটিভ এ আছি, তাই আমি সেট করতে পারি না width: 100%। চেষ্টা করেছেন flex: 1এবং align-self: stretch, উভয়ই কাজ করছেন না। আমি উইন্ডোটির পূর্ণ প্রস্থ পেতে ডাইমেনশনগুলি ব্যবহার করে শেষ করেছি এবং এটি কাজ করেছে।

সম্পাদনা

প্রতিক্রিয়া নেটিভের নতুন সংস্করণ হিসাবে (আমি 0.49 এর সাথে আছি) এটি গ্রহণ করে width: 100%।

Comments

এটি আপনার পক্ষে সহায়ক হতে পারে .. css-tricks.com/almanac/properties/p/p स्थिति

— শিবকুমার কান্দি

এর আচরণ 2016 সালের কিছু সময় পরিবর্তিত হয়েছিল - developers.google.com/web/updates/2016/06/…

— সাইমন_ওয়েভার

Answer 1

না, একেবারে পজিশনিং ফ্লেক্স পাত্রে নয় conflict কোনও উপাদানকে একটি ফ্লেক্স ধারক হিসাবে তৈরি করা কেবল তার অভ্যন্তর বিন্যাসের মডেলকেই প্রভাবিত করে, এটির উপকরণগুলি যেভাবে সাজানো হয়েছে। পজিশনিং উপাদানটিকে নিজেই প্রভাবিত করে এবং প্রবাহ বিন্যাসের জন্য এর বাহ্যিক ভূমিকা পরিবর্তন করতে পারে।

এটার মানে হচ্ছে

• আপনি যদি কোনও উপাদানের সাথে নিখুঁত অবস্থান যুক্ত করেন তবে display: inline-flexএটি ব্লক-স্তর (যেমন display: flex) হয়ে উঠবে , তবে এখনও একটি ফ্লেক্স বিন্যাস প্রসঙ্গে উত্পন্ন করবে।

• আপনি যদি কোনও উপাদানের সাথে নিখুঁত অবস্থান যুক্ত করেন display: flexতবে পূরণযোগ্য-এর পরিবর্তে সঙ্কুচিত-থেকে-ফিট অ্যালগরিদম (ইনলাইন-স্তরের ধারকগুলির সাধারণ) ব্যবহার করে এটি আকারের হবে।

তাই বলা হয়, একেবারে পজিশনিং আনমন শিশুদের সঙ্গে দ্বন্দ্ব ।

এটি প্রবাহের বাইরে থাকায়, ফ্লেক্স ধারকটির একেবারে অবস্থানযুক্ত শিশু ফ্লেক্স বিন্যাসে অংশ নেয় না।

Answer 2

আপনি পিতামাতার প্রস্থ ভুলে গেছেন

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Answer 3

পাঠ্যটি width:100%আপনাকে পিতামাতাকে দিতে হবে center।

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

আপনার যদি উল্লম্বভাবে সারিবদ্ধ করার দরকার হয় তবে দিন height:100%এবং দিনalign-itens: center

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
 }

Answer 4

আমার ক্ষেত্রে, সমস্যাটি ছিল যে আমার একটি দ্বন্দ্বী জেড-সূচকের সাথে ডিভের কেন্দ্রে আরেকটি উপাদান ছিল।

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>