সিএসএস হ'ল ফ্লেক্সবক্সের সাহায্যে একটি আইটেম সারিবদ্ধ করুন

Question

https://jsfiddle.net/vhem8scs/

দুটি আইটেমের বামদিকে সারিবদ্ধ করা এবং একটি আইটেমটি ফ্লেক্সবক্সের সাথে ডান সারিবদ্ধ হওয়া সম্ভব? লিঙ্কটি আরও স্পষ্টভাবে দেখায়। শেষ উদাহরণটি আমি অর্জন করতে চাই।

ফ্লেক্সবক্সে আমার কাছে কোডের একটি ব্লক রয়েছে। ফ্লোট সহ আমার কাছে চারটি কোডের কোড রয়েছে have আমি ফ্লেক্সবক্সকে কেন পছন্দ করি তার একটি কারণ এটি।

এইচটিএমএল

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

সিএসএস

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

Comments

stackoverflow.com/a/33856609/3597276

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

Answer 1

একটি ফ্লেক্স শিশুকে ডানদিকে সারিবদ্ধ করার জন্য এটি সেট করুনmargin-left: auto;

থেকে আনমন বৈশিষ্ট :

মূল অক্ষে অটো মার্জিনের একটি ব্যবহার হ'ল ফ্লেক্স আইটেমগুলিকে পৃথক "গোষ্ঠীগুলিতে" আলাদা করা। নীচের উদাহরণটি দেখায় যে এটি সাধারণ ইউআই প্যাটার্নটিকে পুনরুত্পাদন করতে কীভাবে ব্যবহার করতে হয় - কিছুটি বামদিকে সারিবদ্ধ এবং অন্যেরা ডানদিকে সারিবদ্ধভাবে একক ক্রিয়াকলাপ।

.wrap div:last-child {
  margin-left: auto;
}

আপডেট

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

বিঃদ্রঃ:

আপনি ফ্লেক্স-গ্রোথ সেট করে অনুরূপ প্রভাব অর্জন করতে পারেন: 1 মাঝারি ফ্লেক্স আইটেমটিতে (বা শর্টহ্যান্ড flex:1) যা শেষ আইটেমটি পুরোপুরি ডানদিকে ঠেলে দেয়। ( ডেমো )

তবে স্পষ্টত পার্থক্য হ'ল মাঝারি আইটেমটি এটির প্রয়োজনের চেয়ে বড় হয়ে যায়। পার্থক্যটি দেখতে ফ্লেক্স আইটেমগুলিতে একটি বর্ডার যুক্ত করুন।

ডেমো

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Comments

ধন্যবাদ! আমি এটি পড়ার আগে আরেকটি জিনিস কাজ করেছিলাম। এটি ফ্লেক্স-গ্রোথ সেট করতে ছিল: 1টিকে অন্যটিকে ধাক্কা দেওয়া উচিত on এটি পাশাপাশি কাজ করে। আপনি কি জানেন যে তাদের মধ্যে কোনটি ভাল এবং কেন?

— জেনস টার্নেল

দুর্দান্ত উত্তর। সুতরাং মার্জিনটি কোনও অতিরিক্ত স্থান নেয় না, এবং ফ্লেক্স: 1 করে। শান্ত!

— জেনস টার্নেল

@ জেনসট্রনেল, autoমার্জিনটি ফ্লেক্স আইটেমগুলি পৃথক করতে পাত্রে ফাঁকা জায়গা ব্যবহার করে। flex-grow/ flexসম্পত্তি, যে খালি জায়গা লাগে এটা আনমন আইটেম, যা পরিমাণ দ্বারা বিস্তৃতি দেয়। ড্যানিয়েল্ড দ্বারা উল্লিখিত হিসাবে, পরবর্তী পদ্ধতিটি ফ্লেক্স আইটেমটি দুটি বৃহত করে তোলে, যা আপনি চান না।

— মাইকেল বেনিয়ামিন

সব নায়ক ক্যাপ পরেন না।

— টম

ডানদিকে একাধিক উপাদান সারিবদ্ধ করতে @ ব্যবহারকারী 1063287 কেবল মার্জিন-বাম প্রয়োগ করুন: প্রথম উপাদানটিতে স্বয়ংক্রিয় যা ডানদিকে সারিবদ্ধ হওয়া প্রয়োজন। সুতরাং আসুন আমরা বলি যে আপনি শেষ 4 টি উপাদান ডানদিকে প্রান্তিক করতে চান, আপনি এটি করতে চাই: div:nth-last-child(4) { margin-left: auto } codepen.io/danield770/pen/ERyoar

— ড্যানিয়েলড

Answer 2

সংক্ষিপ্ত, খাঁটি ফ্লেক্সবক্স বিকল্পের জন্য, বাম-প্রান্তিকৃত আইটেম এবং ডান-প্রান্তিককরণ আইটেমগুলি গোষ্ঠীভুক্ত করুন:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

এবং ব্যবহার space-between:

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

এইভাবে আপনি একাধিক আইটেমকে ডানদিকে গোষ্ঠীবদ্ধ করতে পারেন (বা কেবল একটি)।

https://jsfiddle.net/c9mkewwv/3/

Comments

এটি কাজ করে, তবে আপনি যদি প্রতিটি দলের অভ্যন্তরের উপাদানগুলি পরিবর্তন করতে display: inline;বা পরিবর্তন না করেন display: inline-block;, তবে তারা ফ্লেক্সবক্সের মতো একটি সারিতে সমস্ত পরিবর্তে স্ট্যাক হয়ে যান অন্যথায় সেগুলি থাকে।

— ডিআইএমএম রিপার

@ ডিডিএমএমইপার আমি নিশ্চিত না যে আমি সমস্যাটি দেখছি। আপনি কি প্রসারিত করতে পারেন?

— প্রবাহিত

আমি কেবল বোঝাতে চাইছি আপনি কীভাবে ট্যাগগুলি তত্ক্ষণাত মোড়ানো Oneএবং গুলি Twoথেকে divগুলি এবং spanএস এ পরিবর্তন করেছেন - যদি তারা এখনও থাকে display: block;তবে তারা পৃথক লাইনে প্রবাহিত হবে। যেহেতু ওপিটি মূলত divএস ছিল , আমি কেবল এটি উল্লেখ করতে চেয়েছিলাম যে কেবল তাদের অন্যের divমধ্যে রেখে দেওয়া মূল ট্যাগগুলির প্রদর্শন পরিবর্তন না করে কাজ করবে না।

— ডিআইএমএম রিপার

হ্যাঁ, যেহেতু উপাদানগুলি এখন স্তর থেকে নিচে রয়েছে display: flexতাই আর তাদের বিন্যাসকে প্রভাবিত করছে না। আপনি যদি ডিভ ব্যবহার করতে চান তবে হ্যাঁ, inlineবা inline-blockকাজ করবে। তবে, স্পষ্টতই, flexযেহেতু আমরা এটি flex-direction: rowইতিমধ্যে পিতামাতার ডিভ এর সাথে ডিফল্টর জন্য ব্যবহার করছি । প্রাক্তন। jsfiddle.net/ynbb5964/2

— স্প্রোভ

ধন্যবাদ, আমি প্রান্তিককরণের চেষ্টা করেছি: স্বাচ্ছন্দ্যময়, তবে কেন এটি কার্যকর হয় না?

— আনন্দ

Answer 3

কেন্দ্রে কিছু উপাদান (শিরোলেখ উপাদান) এবং শেষ উপাদানটিকে ডানদিকে (শিরোলেখ) সারিবদ্ধ করতে।

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}