ধারক শেষে শেষ ফ্লেক্স আইটেম অবস্থান করুন

Question

এই প্রশ্নটি ফ্লেক্সবক্স সহ পুরো সিএস 3 সমর্থন সহ একটি ব্রাউজারকে উদ্বেগ দেয়।

আমার এতে কিছু আইটেম সহ একটি ফ্লেক্স ধারক রয়েছে। এগুলি সবই ফ্লেক্স-স্টার্টে ন্যায়সঙ্গত তবে আমি চাই শেষ .end আইটেমটি ফ্লেক্স-এন্ডে ন্যায়সঙ্গত হোক। এইচটিএমএল সংশোধন না করে এবং নিরঙ্কুশ পজিশনিংয়ের অবলম্বন না করে কি এটি করার ভাল উপায় আছে?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Comments

হ্যাঁ. দেখুন auto: এখান মার্জিন কনটেন্ট কপিরাইট আইনে পূর্বানুমতি stackoverflow.com/a/33856609/3597276

— মাইকেল বেঞ্জামিন

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

— mfluehr

Answer 1

নমনীয় বক্স লেআউট মডিউল - 8.1। অটো মার্জিনের সাথে সারিবদ্ধ হচ্ছে

ফ্লেক্স আইটেমগুলিতে অটো মার্জিনের প্রভাব ব্লক প্রবাহে অটো মার্জিনের সাথে খুব একই রকম হয়:

• নমনীয় ঘাঁটি এবং নমনীয় দৈর্ঘ্যের গণনার সময়, অটো মার্জিনগুলি 0 হিসাবে গণ্য হয়।

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

অতএব আপনি margin-top: autoঅন্যান্য উপাদান এবং শেষ উপাদানটির মধ্যে স্থান বিতরণ করতে ব্যবহার করতে পারেন ।

এটি নীচে সর্বশেষ উপাদান অবস্থান করবে।

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

---

অনুরূপভাবে, আপনি একইভাবে margin-left: autoবা margin-right: autoআনুভূমিকভাবে একই প্রান্তিককরণের জন্যও ব্যবহার করতে পারেন ।

p:last-of-type {
  margin-left: auto;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Comments

আহ পারফেক্ট, বিশ্বাস করতে পারছি না যে আমি মিস করেছি! বিশেষত বিব্রতকর যেহেতু আমি মার্জিন-মার্জেন-অটো-টু-সেন্টার-উল্লম্বভাবে কৌতুক ব্যবহার সম্পর্কে সম্পূর্ণরূপে জানি এবং এটি সর্বদা ব্যবহার করি

— জর্জ মাউয়ার

@ j08691 এটি কেন কাজ করে সে সম্পর্কে আমার কোনও আনুষ্ঠানিক ব্যাখ্যা নেই , তবে আপনি margin: 0 autoঅনুভূমিক কেন্দ্রীকরণের জন্য কীভাবে ব্যবহার করতে পারবেন তা এটির মতো । ফ্লেক্সবক্স আইটেমগুলি মার্জিনকে সম্মান করে এবং আমি বিশ্বাস করি যে margin: autoমূলত ভাইবোনটির মধ্যে যতটা সম্ভব স্থানের সাথে আইটেমটি মূলত অবস্থান করবে। দেখুন: w3.org/TR/css-flexbox-1/#auto-margins

— জোশ ক্রোজিয়ার

@ jo8691 যদি আমি ভুল না হয়ে থাকি তবে margin: autoএকটি ফ্লেক্স আইটেম এটিকে সেদিকে যতটা সম্ভব স্থান তৈরি করতে বলে।

— জর্জ মাউয়ার

অনুমানটি বলেছে Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

— জর্জ মাউয়ার

আমি ফ্লেক্সবক্স সম্পর্কে আরও জানার চেষ্টা করছি তাই এই আচরণটি বর্ণনা করে এমন একটি রেফারেন্স দেখে ভাল লাগবে। বিশেষত যে এটি উদ্দেশ্যযুক্ত এবং কোন তীক্ষ্ণ বা পার্শ্ব প্রতিক্রিয়া নয়।

— j08691

Answer 2

এই ফ্লেক্সবক্স নীতিটি অনুভূমিকভাবেও কাজ করে

নমনীয় ঘাঁটি এবং নমনীয় দৈর্ঘ্যের গণনার সময়, অটো মার্জিনগুলি 0 হিসাবে বিবেচিত হয় jus
ন্যায্যতা-সামগ্রী এবং অ্যালাইন-সেল্ফের মাধ্যমে প্রান্তিককরণের আগে, কোনও ধনাত্মক মুক্ত স্থান সেই মাত্রায় অটো মার্জিনগুলিতে বিতরণ করা হয়।

শেষ আইটেমটির জন্য একটি স্বয়ংক্রিয় বাম মার্জিন সেট করা কাজ করবে।

.last-item {
  margin-left: auto;
}

কোড উদাহরণ:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

কোডপেন স্নিপেট

এটি ডেস্কটপ পাদচরণকারীদের জন্য খুব কার্যকর হতে পারে।

এনভাটো যেমন এখানে কোম্পানির লোগো দিয়েছিল।

কোডপেন স্নিপেট

Comments

নিশ্চিত যে এটি আসলে কীভাবে কাজ করে তবে এটি একটি প্রকল্পে আমাকে সহায়তা করেছিল।

— লুই 345

আমার যদি প্রয়োজন হয় যে সমস্ত আইটেমটি কেন্দ্রে থাকবে এবং সর্বশেষটি ডান পাশে থাকবে?

— ইলোরিয়ান