আমি কীভাবে আমার ফ্লেক্সবক্স লেআউটটিকে 100% উল্লম্ব স্থান নিতে পারি?

Question 1

আমি কীভাবে বলতে পারি যে একটি ফ্লেক্সবক্স লেআউট সারিটি ব্রাউজার উইন্ডোতে থাকা অবশিষ্ট উল্লম্ব স্থানটি গ্রাস করে?

আমার একটি 3-সারির ফ্লেক্সবক্স লেআউট রয়েছে। প্রথম দুটি সারি উচ্চতা স্থির করে তবে তৃতীয়টি গতিশীল এবং আমি এটি ব্রাউজারের পুরো উচ্চতায় বৃদ্ধি পেতে চাই।

এখানে চিত্র বর্ণনা লিখুন

আমার কাছে সারি -3 এ আরেকটি ফ্লেক্সবক্স রয়েছে যা কলামগুলির একটি সেট তৈরি করে। এই কলামগুলির মধ্যে উপাদানগুলি যথাযথভাবে সামঞ্জস্য করতে আমার তাদের ব্রাউজারের পুরো উচ্চতা বুঝতে হবে - বেসে ব্যাকগ্রাউন্ড রঙ এবং আইটেম প্রান্তিককরণের মতো জিনিসগুলির জন্য। প্রধান বিন্যাসটি শেষ পর্যন্ত এর সাথে সাদৃশ্যযুক্ত হবে:

এখানে চিত্র বর্ণনা লিখুন

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>

স্নিপেট প্রসারিত করুন

আমি একটি heightবৈশিষ্ট্য যুক্ত করার চেষ্টা করেছি , যা আমি যখন হার্ড সংখ্যায় সেট করি তখন তা কাজ করে না তবে যখন আমি সেট করেছিলাম 100%। আমি বুঝতে পারি যে height: 100%কাজ করছে না, কারণ সামগ্রীগুলি ব্রাউজার উইন্ডোটি পূরণ করছে না, তবে আমি কি ফ্লেক্সবক্স লেআউটটি ব্যবহার করে ধারণাটি তৈরি করতে পারি?

Question 2

আপনার heightসম্পূর্ণ সেট html, body, .wrapperকরতে হবে 100%(পুরো উচ্চতার উত্তরাধিকারী হওয়ার জন্য ) এবং তারপরে কেবল অন্যের flexচেয়ে বেশি 1হওয়া .row3এবং তার চেয়ে বেশি মান নির্ধারণ করা উচিত।

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

স্নিপেট প্রসারিত করুন

ডেমো

Question 3

উচ্চতা 100% র্যাপার সেট করুন

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

এবং তৃতীয় সারিটি ফ্লেক্স-গ্রোকে সেট করুন

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

ডেমো

Question 4

100% কাজ করে এমন আরেকটি উপায় আমি আপনাকে দেখাতে চাই। উদাহরণের জন্য আমি কিছু প্যাডিংও যুক্ত করব।

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

আপনি দেখতে পাচ্ছেন যে আমরা ফ্লেক্স-গ্রো এবং ফ্লেক্স-দিক বৈশিষ্ট্যটি ব্যবহার করার সময় নিয়ন্ত্রণের জন্য কয়েকটি মোড়কের সাহায্যে এটি অর্জন করতে পারি।

1: যখন পিতামাতার "ফ্লেক্স-দিকনির্দেশ" একটি "সারি" হয়, তখন তার শিশু "ফ্লেক্স-গ্রো" অনুভূমিকভাবে কাজ করে। 2: যখন পিতামাতার "ফ্লেক্স-দিকনির্দেশ" "কলাম" হয়, তখন তার শিশু "ফ্লেক্স-গ্রো" উল্লম্বভাবে কাজ করে।

আশাকরি এটা সাহায্য করবে

ড্যানিয়েল