ক্রস-অক্ষগুলি পূরণ করতে বাচ্চাদের কীভাবে প্রসারিত করা যায়?

Question

আমার একটি বাম-ডান ফ্লেক্সবক্স রয়েছে:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

সমস্যাটি হ'ল সঠিক সন্তান প্রতিক্রিয়াশীল আচরণ করছে না। সুনির্দিষ্টভাবে বলতে গেলে, আমি এটিটি মোড়কের উচ্চতা পূরণ করতে চাই।

এটি কীভাবে সম্পাদন করবেন?

Comments

এটি মোড়কের উচ্চতা পূরণ করে! আমি এটি ক্রোম এবং ফায়ারফক্সে পরীক্ষা করেছি এবং কোনও সমস্যা হয়নি। হতে পারে আপনি নিজের কোডটি খুব সহজ করেছেন। আপনি background-colorবাচ্চাদের জন্য সেট করে বা align-items: centerমোড়কে সেট করে এটি পরীক্ষা করতে পারেন ।

— সমাদ মনতাজারি

হ্যাঁ, মোড়কের উচ্চতা কিছু কারণে

— সাফারিতে

Answer 1

• একটি সারি-ফ্লেক্সবক্স ধারকের বাচ্চারা স্বয়ংক্রিয়ভাবে ধারকটির উল্লম্ব স্থানটি পূরণ করে।

• flex: 1;আপনি যদি বাকী অনুভূমিক স্থানটি পূরণ করতে চান তবে কোনও সন্তানের জন্য নির্দিষ্ট করুন :

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

• flex: 1;উভয় সন্তানের জন্য উল্লেখ করুন যদি আপনি তাদের অনুভূমিক স্থানের সমান পরিমাণ পূরণ করতে চান:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Comments

flexজন্য একটি সাঁটে লেখার সম্পত্তি flex-grow, flex-shrinkএবং flex-basis। flex: 1;সমতূল্য flex-grow: 1;।

— ররি ও'কেনে

দেখে মনে হচ্ছে এটির align-items: stretch;দরকার নেই

— ম্যাট