ফ্লেক্সবক্সের সাহায্যে একটি উপাদানকে নীচে সারিবদ্ধ করুন

Question

divকিছু বাচ্চাদের সাথে আমার একটি রয়েছে:

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

এবং আমি নিম্নলিখিত লেআউটটি চাই:

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------

pআমি যতই পাঠ্য থাকি তা .buttonপ্রবাহের বাইরে না নিয়েই সর্বদা নীচে সর্বদা আটকে রাখতে চাই । আমি শুনেছি এটি ফ্লেক্সবক্সের মাধ্যমে অর্জনযোগ্য হতে পারে তবে আমি এটি কাজ করতে পারি না।

Comments

শুধু দেই postition: absolute; bottom 0;?

— জোনাথন

@ জোনাথন মোড়কের নির্দিষ্ট উচ্চতা নেই। যদি আমি এটি গ্রহণ প্রবাহিত এটা টেক্সট ওভারল্যাপ হবে

— অতি বৃহত

@ পুরাতন কিউ কে কিন্তু আপনি মোড়ক দিতে পারতেন position:relative- এটি বোকা কারণ আমি মনে করি এটি ডিফল্টরূপে তুলনামূলক তবে আপনার সন্তানের পরম অবস্থানের জন্য এটি সেট করা আছে। তারপরে bottom:0ফ্লাশ ফিট হবে।

— জ্যাকসনকর

জ্যাকসনক্র ঠিকই বলেছেন, এটি সেরা সমাধান, অন্যরা অনেক দীর্ঘ, খুব

— সংঘাতযুক্ত

@ জ্যাকসনকর একটি ডিভের ডিফল্ট অবস্থান staticনয় relative।

— অতি বৃহত

Answer 1

আপনি অটো মার্জিন ব্যবহার করতে পারেন

মাধ্যমে প্রান্তিককরণ এর আগে justify-contentএবং align-selfকোন ইতিবাচক মুক্ত স্থান যে মাত্রা স্বয়ং মার্জিন বিতরণ করা হয়।

সুতরাং আপনি এগুলির একটি (বা উভয়) ব্যবহার করতে পারেন:

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

বিকল্পভাবে, আপনি aউপলব্ধ স্থানটি পূরণ করার জন্য বাড়ার আগে উপাদানটি তৈরি করতে পারেন :

p { flex-grow: 1; } /* Grow to fill available space */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
p {
  flex-grow: 1;
}

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

Comments

আমার জন্য, এটি ক্রোমে কাজ করে তবে আইওএস 10.2 তে সাফারিতে নয়। কেউ কি নিশ্চিত করতে পারবেন?

— ম্যাথু

@ ওরিওল আমি এই পদ্ধতিটি পছন্দ করি, কিন্তু ভেঙে যাওয়া মার্জিন হ্রাসের পার্শ্ব প্রতিক্রিয়া নয়, আপনি এই সম্পর্কে কী করবেন?

— নিল

ফ্লেক্স-গ্রো আমার জন্য কাজ করেছিল। আমি এটি কীভাবে করেছি তা এখানেhtml { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }

— 19.07 এ প্রোটো ইভেলিজেলিয়ান

পাশাপাশি একটি পার্শ্ব নোট, আপনি height: 100%যে মূল উপাদানটির সাথে কিছুটা নীচে ঠেলে দেওয়ার চেষ্টা করছেন তার কথা মনে রাখুনmargin-top: auto;

— স্কোলাইন্ড

"কোনও ধনাত্মক মুক্ত স্থান সেই মাত্রায় অটো মার্জিনগুলিতে বিতরণ করা হয়।" এটি এই মত ছোট জিনিস যা এত মার্জিত, আমার জন্য এই সমাধানটি ছিল আপনার উত্তরের ভিত্তিতে 2 লাইনের কোড। আপনাকে ধন্যবাদ :)

— দানজাহ

Answer 2

আপনি প্রদর্শনটি ব্যবহার করতে পারেন: নীচে একটি উপাদান অবস্থানের জন্য নমনীয়তা, তবে আমি মনে করি না আপনি এই ক্ষেত্রে ফ্লেক্স ব্যবহার করতে চান, কারণ এটি আপনার সমস্ত উপাদানকে প্রভাবিত করবে।

ফ্লেক্স ব্যবহার করে নীচে একটি উপাদান অবস্থান করতে চেষ্টা করুন:

.container {
  display: flex;
}

.button {
  align-self: flex-end;
}

আপনার সর্বোত্তম বাজি অবস্থান নির্ধারণ করা: বোতামটির সাথে নিরঙ্কুশ এবং এটি সেট করা bottom: 0বা আপনি বোতামটি ধারকটির বাইরে রাখতে পারেন এবং এটি পাত্রে transform: translateY(-100%)এনে আনতে নেতিবাচক ব্যবহার করতে পারেন:

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

এই জেএসফিডেলটি দেখুন

Comments

আপনি যদি নীচে এটি চান তবে কলামে নমনীয় দিকটি সেট করতে ভুলবেন না।

— উইলিয়ামি

আমি যদি উচ্চতা প্রদান করতে না পারি?

— চিহ্নিত করুন

আমার জন্য যা কাজ করেছে তা কেবল: `` `। সামগ্রী content প্রদর্শন: ফ্লেক্স; নমনীয় দিক: কলাম; জাস্টিফাই-কনটেন্ট: ফ্লেক্স-এন্ড; div <ডি ক্লাস = "বিষয়বস্তু"> <a শ্রেণী="bottom"> কিছু </a> </div> `` `

— gsalgadotoledo

Answer 3

সমাধানটি align-self: flex-end;আমার পক্ষে কাজ করে না তবে আপনি যদি ফ্লেক্সটি ব্যবহার করতে চান তবে এটি একটিটি করেছিল:

ফলাফল

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|                   |
|                   |
|                   | 
|link button        |
 -------------------

কোড

দ্রষ্টব্য: "কোড স্নিপেট চালানোর সময়" নীচের লিঙ্কটি দেখতে আপনাকে নীচে স্ক্রোল করতে হবে।

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 300px;
}

.content .upper {
  justify-content: normal;
}

/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
  border: 1px solid #ccc;
}

<div class="content">
  <div class="upper">
	  <h1>heading 1</h1>
	  <h2>heading 2</h2>
	  <p>paragraph text</p>
  </div>

  <div class="bottom">
	  <a href="/" class="button">link button</a>
  </div>
</div>

Comments

বিষয়বস্তু হ'ল কলামের ধারক এটি অন্য 2 ধারককে ধরে রেখেছে - ন্যায্যতা-সামগ্রী সহ: স্থান-মধ্যবর্তী; আপনি ফ্লেক্সবক্সকে যতটা সম্ভব কন্টেনারটিকে একে অপরের থেকে দূরে সরিয়ে দিতে বলুন (এই ক্ষেত্রে বিষয়বস্তু ধারকটির উচ্চতা দ্বারা সীমাবদ্ধ)

— বিজয়ী

এটিই আসল ফলাফল নয়, এতে প্রতিটি আইটেমের মধ্যে স্থান থাকবে (অতএব নাম)

— বার্ব্জ_ওয়াহুল

@ বার্বজ_ওয়াইওল না, আপনি ধারকটির উচ্চতা বাড়িয়ে দিলে এটি কার্যকর হয় (আপডেট উদাহরণ দেখুন)

— টিমো

অনেক অনুসন্ধান করার পরে, এটি ঠিক নিখুঁত! ধন্যবাদ.

— রুডি

কিছুটা পরিবর্তন করে, এই উত্তরটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে, আপনাকে ধন্যবাদ

— RealMJDev

Answer 4

ফ্লেক্সবক্স সম্পর্কে নিশ্চিত না তবে আপনি অবস্থানের সম্পত্তিটি ব্যবহার করে করতে পারেন।

অভিভাবক div position: relative এবং সন্তানের উপাদান সেট করুন যা হতে পারে একটি <p>বা <h1>ইত্যাদি .. সেট position: absoluteএবং bottom: 0।

উদাহরণ:

index.html

<div class="parent">
  <p>Child</p>
</div>

style.css

.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}

কোড পেন এখানে।

Comments

position:fixedকাজ করবে না কারণ তখন এটি যে ধারকটিতে রয়েছে তার সাথে এটি আপেক্ষিক হবে না Perhaps সম্ভবত আপনি বোঝাতে চেয়েছিলেন position:absolute?

— সেনসুরে

এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এই কোডটির প্রশ্নের উত্তর কীভাবে তার দীর্ঘমেয়াদী মানকে উন্নত করে সে সম্পর্কে অতিরিক্ত প্রসঙ্গ সরবরাহ করে।

— রোলস্টুহল্ফাহেরার

আপডেট উত্তর।

— সঞ্জয় শ্র

Answer 5

<section style="display:flex; flex-wrap:wrap;">
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
</section>

ডেমো: https://codepen.io/ferittuncer/pen/YzygpWX

Answer 6

আপনার ডিসপ্লেটি ফ্লেক্সে সেট করার সময় আপনি flexকোন বিষয়বস্তু বাড়তে পারে এবং কোন বিষয়বস্তুতে পারে না তা চিহ্নিত করার জন্য আপনি সম্পত্তিটি ব্যবহার করতে পারেন।

নমনীয় সম্পত্তি

div.content {
 height: 300px;
 display: flex;
 flex-direction: column;
}

div.up {
  flex: 1;
}

div.down {
  flex: none;
}

<div class="content">
  <div class="up">
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
  </div>

  <div class="down">
    <a href="/" class="button">Click me</a>
  </div>
</div>

Answer 7

এটা চেষ্টা কর

.content {
      display: flex;
      flex-direction: column;
      height: 250px;
      width: 200px;
      border: solid;
      word-wrap: break-word;
    }

   .content h1 , .content h2 {
     margin-bottom: 0px;
    }

   .content p {
     flex: 1;
    }

   <div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

Answer 8

আমি স্রেফ এর জন্য একটি সমাধান খুঁজে পেয়েছি।

যারা প্রদত্ত উত্তরে সন্তুষ্ট নন তাদের জন্য ফ্লেক্সবক্সের মাধ্যমে এই পদ্ধতির চেষ্টা করতে পারেন

সিএসএস

    .myFlexContainer {
        display: flex;
        width: 100%;
    }

    .myFlexChild {
        width: 100%;
        display: flex;

        /* 
         * set this property if this is set to column by other css class 
         *  that is used by your target element 
         */
        flex-direction: row;

        /* 
         * necessary for our goal 
         */
        flex-wrap: wrap;
        height: 500px;
    }

    /* the element you want to put at the bottom */
    .myTargetElement {
        /*
         * will not work unless flex-wrap is set to wrap and 
         * flex-direction is set to row
         */
        align-self: flex-end;
    }

এইচটিএমএল

    <div class="myFlexContainer">
        <div class="myFlexChild">
            <p>this is just sample</p>
            <a class="myTargetElement" href="#">set this to bottom</a>
        </div>
    </div>