কীভাবে ফ্লেক্স আইটেমটি ডান-সারিবদ্ধ করবেন?

Question

"পরিচিতি" ব্যবহারের চেয়ে ডান-সারিবদ্ধ করার জন্য আরও কি ফ্লেক্সবক্স-ইশ উপায় আছে position: absolute?

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

http://jsfiddle.net/vqDK9/

Comments

আপনি ঠিক ভাসা ব্যবহার করতে পারেন, কিন্তু এটি একইভাবে ...! সর্বোত্তম উপায় হ'ল পাঠ্য-সারিবদ্ধ সহ একটি প্রদর্শন টেবিল ব্যবহার করা।

— যোহান তিলোটি

অবশ্যই, যদি এটি আরও ভাল হয়। "যোগাযোগ" ডান-সারিবদ্ধকরণে এখনও সমস্যা হচ্ছে যদিও: jsfiddle.net/vqDK9/1

— মার্ক বোল্ডার

আমি আপনার ফিডল jsfiddle.net/vqDK9/2

— Yohann Tilotti

এটি করার জন্য এখানে কমপক্ষে দুটি উপায় রয়েছে: স্ট্যাকওভারফ্লো.com

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

Answer 1

আপনি এখানে যান। justify-content: space-betweenফ্লেক্স পাত্রে সেট করুন।

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

Comments

বাjustify-content: flex-end

— বিটি

.C এর প্রস্থ 300px সেট করার চেষ্টা করুন। শিরোনামটি আর কেন্দ্রিক নয়। হ্যাঁ, এটি প্রশ্নের উত্তর দেয় তবে এটি নকশাটি ভেঙে দেয়।

— আগামেমনাস

মনে রাখবেন যে এটি সর্বদা আপনার প্রত্যাশার মতো কাজ করে না, যেমন কোনও .c::afterসিউডো উপাদান রয়েছে। আমার অভিজ্ঞতা, margin-left: auto;উপায় হয়।

— উইল

বাflex-flow: row-reverse;

— jchook

আপনি যদি কোনও ফ্লেক্স পাত্রে কেবল একটি আইটেম সারিবদ্ধ না করতে চান তবে আমি এটির সঠিক উত্তর দেখছি না।

— ফক্সহাউন্ডন

Answer 2

একটি আরও নমনীয় পদ্ধতি হ'ল autoবাম মার্জিন ( ব্লক ফর্ম্যাটিং প্রসঙ্গে ব্যবহারের তুলনায় ফটোগুলি আইটেমগুলি অটো মার্জিনকে কিছুটা আলাদাভাবে আচরণ করে)।

.c {
    margin-left: auto;
}

আপডেট করা ফিডাল:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Comments

ধন্যবাদ। উপরে ব্যক্তিগতভাবে আপনি যোহান তিলোত্তির প্রদর্শন টেবিল পদ্ধতির চেয়ে এটিকে পছন্দ করবেন? যদি তাই হয় তবে কেন?

— মার্ক বোল্ডার

@ মার্কবোল্ডার: সামঞ্জস্যতার কারণে তার পদ্ধতিটি আরও ভাল, তবে আপনি যদি ইতিমধ্যে ফ্লেক্সবক্স ব্যবহার করেন তবে আমার উত্তরটি আরও অর্থবোধ করবে।

— ভাসিতে ভাসিতে

@ মার্কবোল্ডার: তারা উভয়ই এক্ষেত্রে একই কাজ সম্পাদন করে। সুবিধা অন্যান্য বৈশিষ্ট্যাবলী (এবং আচরণ) আনমন আইটেম সঙ্গে যুক্ত থাকার করা হবে যে টেবিল পদ্ধতির আছে না ( flex, orderইত্যাদি)।

— ভাসিতে ভাসিতে

যদি আপনি উপাদানগুলি মোড়তে না পারেন এবং আপনার শেষ তিনটি সঠিকভাবে ভাসতে বলা প্রয়োজন তবে কেবল এই margin-left: auto;শৈলীর সাহায্যে শেষ থেকে ২ য়টিকে লক্ষ্য করুন ।

— ড্যানিয়েল সোকলোভস্কি

@ জাস্টিন এটি আবিষ্কার করেছেন, এগুলিকে জড়ানোর দরকার নেই - আমি আমার ক্ষেত্রে পারিনি। সমাধানটি ছিল কেবলমাত্র তিনটি আইটেমের মধ্যে 1 মকে লক্ষ্য করে margin-left: auto;।

— ড্যানিয়েল সোকলভস্কি

Answer 3

আপনি যদি এর জন্য ফ্লেক্সবক্স ব্যবহার করতে চান তবে আপনার এটি করা ( display: flexপাত্রে, flex: 1আইটেমগুলিতে এবং text-align: rightঅন ​​করে .c) সক্ষম হওয়া উচিত :

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... বা বিকল্পভাবে (এমনকি আরও সহজ), যদি আইটেমগুলি পূরণ করার প্রয়োজন না হয়, আপনি ধারকটিতে ব্যবহার করতে পারেন justify-content: space-betweenএবং text-alignনিয়মগুলি পুরোপুরি সরিয়ে ফেলতে পারেন :

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

আপনাকে দ্রুত উপরে চেষ্টা করার অনুমতি দেওয়ার জন্য এখানে কোডেপেনের একটি ডেমো রয়েছে ।

Comments

space-betweenঠিক আমি যা খুঁজছিলাম, ধন্যবাদ!

— এডি ফ্ল্যাচার 21

দ্বিতীয় পরামর্শ, প্রত্যাশিত আচরণ ব্যবহার করার সময় সীমানা অদৃশ্য হয়ে যায়? codepen.io/oshihirii/pen/RygKRd

— ব্যবহারকারী 1063287

Answer 4

অবশিষ্ট স্থান পূরণ করতে আপনি একটি ফিলারও ব্যবহার করতে পারেন।

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

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

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Comments

অবশেষে কেউ ফ্লেক্সবক্স বোঝে

— কোকোডোকো

@ কোকোডোকো হ্যাঁ, অন্য একটি উপাদানকে সরিয়ে দেওয়ার জন্য আরও একটি অ-শব্দার্থক এইচটিএমএল উপাদান ব্যবহার করা ফ্লেক্সবক্স বোঝার শীর্ষস্থানীয় ...

— জাংশিন

@ জাংশিন ১৩ অন্যান্য জবাবগুলি সকলেই এত বেশি অতিরিক্ত সিএসএস লিখেছেন যাতে আপনি ফ্লেক্স পাত্রে ফেলে দিতে পারেন এবং পুরো জিনিসটি নিজেই কোড করতে পারেন :)

— কোকোডোকো

@ কোকোডোকো justify-content: space-between"এত" সিএসএস, সিরিয়াসলি? পরবর্তী মন্তব্যের প্রয়োজন নেই (তবে আপনি চাইলে - চ্যাটে স্বাগতম)। এই উত্তরটি এখানে তার অধিকার রয়েছে, কারণ এটি হয় একটি সমাধান। তবে অবশ্যই এটি অনুকূল নয় । আইডিক, আপনি লক্ষ্য করতে পারেন নি তবে অন্য উত্তরগুলির বেশিরভাগ সিএসএস হ'ল ওপি'র এবং উত্তরগুলি আসলে লেখকের সিএসএসের পরিমাণ হ্রাস করে (কিছুটা)। এই উত্তরের কম সিএসএস নেই তবে অন্যরা ( ওপিএসএসএস ছাড়া কাজ করবে না - jsfiddle.net/63ma3b56 )। তবে এটিতে আরও একটি এইচটিএমএল উপাদান রয়েছে।

— জাংশিন

Answer 5

অথবা আপনি কেবল ব্যবহার করতে পারেন justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

Comments

justify-content: অ্যাট্রিবিউট আনমন-ধারক একটি বৈশিষ্ট্য, ক্রিস Coyer এর flexy cheatsheet দেখতে css-tricks.com/snippets/css/a-guide-to-flexbox

— ডের Weij Klaas ভ্যান

এটি এই পৃষ্ঠার একমাত্র সমাধান যা আমার পক্ষে কাজ করেছিল।

— ব্যবহারকারী 2847376

Answer 6

সহজ মতে

.main {
    display: flex;
    flex-direction:row-reverse;
}

Answer 7

আপনার স্টাইলশিটে নিম্নলিখিত সিএসএস ক্লাস যুক্ত করুন:

.my-spacer {
    flex: 1 1 auto;
}

বাম দিকের উপাদানটি এবং যে উপাদানটি আপনি ডান-সারিবদ্ধ করতে চান তার মধ্যে একটি ফাঁকা উপাদান রাখুন:

<span class="my-spacer"></span>

Comments

যারা কেবলমাত্র একটি একক উপাদানকে ডানদিকে প্রান্তিককরণ করতে চান না, তবে তারা একটি উপাদানকে বামে সারিবদ্ধ করতে চান এবং ডানদিকে অন্য সারিবদ্ধ করতে চান (একই ফ্লেক্স বিন্যাসের মধ্যে) এই পথেই যেতে হবে!

— সেনসেই জেমস

Answer 8

আপনার যদি একটি আইটেম প্রান্তিকভাবে ছেড়ে যেতে হয় (শিরোনামের মতো) তবে তারপরে একাধিক আইটেম ডানদিকে প্রান্তিককরণ (3 টি চিত্রের মতো) হয় তবে আপনি এই জাতীয় কিছু করতে পারেন:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

এটি দেখতে দেখতে কেমন হবে (কেবলমাত্র সম্পর্কিত সিএসএস উপরের স্নিপেটে অন্তর্ভুক্ত ছিল)

Answer 9

'ন্যায্যতা-সামগ্রী: ফ্লেক্স-এন্ড' প্রাইস বাক্স ধারকটির মধ্যে কাজ করে।

.price-box {
    justify-content: flex-end;
}

Answer 10

আমি দেখতে পেলাম যে ফ্লেক্স ধারকটিতে 'ন্যায্যতা-সামগ্রী: ফ্লেক্স-এন্ড' যুক্ত করা সমস্যার সমাধান করে যখন 'ন্যায্যতা-সামগ্রী: স্থান-মধ্যবর্তী' কিছুই করতে পারে না।

Answer 11

কৌণিক এবং ফ্লেক্স-লেআউট ব্যবহারকারীদের জন্য, ফ্লেক্স-আইটেম ধারকটিতে নিম্নলিখিতটি ব্যবহার করুন:

<div fxLayout="row" fxLayoutAlign="flex-end">

এখানে fxLayoutAlign ডক্স এবং সম্পূর্ণ fxLayout ডক্স এখানে দেখুন ।

Answer 12

টেট্রাদেভের উত্তরের ভিত্তিতে কোড কোড

ডানদিকে চিত্রগুলি:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

বাম দিকে চিত্রগুলি:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>