সিএসএস ফ্লেক্সবক্সে কেন কোনও "ন্যায়সঙ্গত আইটেম" এবং "ন্যায্যতা স্বরূপ" স্বীকৃতি নেই?

Question

একটি ফ্লেক্স ধারকটির প্রধান অক্ষ এবং ক্রস অক্ষটি বিবেচনা করুন:

                                                                                                                                                   _{সূত্র: ডাব্লু 3 সি}

প্রধান অক্ষ বরাবর ফ্লেক্স আইটেম সারিবদ্ধ করার জন্য একটি সম্পত্তি আছে:

• justify-content

ক্রস অক্ষ বরাবর ফ্লেক্স আইটেম সারিবদ্ধ করতে তিনটি বৈশিষ্ট্য রয়েছে:

• align-content
• align-items
• align-self

উপরের চিত্রটিতে, প্রধান অক্ষটি অনুভূমিক এবং ক্রস অক্ষটি উল্লম্ব। এগুলি একটি ফ্লেক্স ধারকটির ডিফল্ট দিকনির্দেশ।

যাইহোক, এই দিকনির্দেশগুলি সহজেই flex-directionসম্পত্তিটির সাথে আদান প্রদান করা যায় ।

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(ক্রস অক্ষটি সর্বদা প্রধান অক্ষের জন্য লম্ব থাকে))

অক্ষগুলির কাজ কীভাবে তা বর্ণনা করার ক্ষেত্রে আমার বক্তব্যটি কোনও দিকই সম্পর্কে বিশেষ কিছু বলে মনে হয় না। প্রধান অক্ষ, ক্রস অক্ষ, তারা উভয়ই গুরুত্বের দিক দিয়ে সমান flex-directionএবং পিছনে পিছনে স্যুইচ করা সহজ করে তোলে।

তাহলে ক্রস অক্ষ দুটি অতিরিক্ত সারিবদ্ধ বৈশিষ্ট্য কেন পাবে?

মূল অক্ষের জন্য কেন align-contentএবং align-itemsএক সম্পত্তিতে সংহত করা হয়?

মূল অক্ষটি justify-selfসম্পত্তি কেন পায় না ?

---

পরিস্থিতি যেখানে এই বৈশিষ্ট্যগুলি কার্যকর হবে:

• ফ্লেক্স ধারক কোণে একটি ফ্লেক্স আইটেম স্থাপন
  #box3 { align-self: flex-end; justify-self: flex-end; }

• ফ্লেক্স আইটেমগুলির একটি গ্রুপ তৈরি করে ডান সারিবদ্ধ করুন ( justify-content: flex-end) তবে প্রথম আইটেমটি বামে সারিবদ্ধ করুন ( justify-self: flex-start)

  একটি গ্রুপ এনএভি আইটেম এবং একটি লোগো সহ একটি শিরোনাম বিভাগ বিবেচনা করুন। সঙ্গে justify-selfলোগো বাম প্রান্তিককৃত করা যেতে পারে যখন এনএভি আইটেম পর্যন্ত ডান থাকার, এবং বিভিন্ন পর্দা মাপ পুরো জিনিস adjusts সহজে ( "flexes")।

• তিনটি ফ্লেক্স আইটেমের এক সারিতে মাঝারি আইটেমটি ধারকটির ( justify-content: center) কেন্দ্রে সংযুক্ত করুন এবং সংলগ্ন আইটেমগুলিকে ধারক প্রান্তে ( justify-self: flex-startএবং justify-self: flex-end) প্রান্তিক করুন ।

  লক্ষ্য করুন মান space-aroundএবং space-betweenউপর justify-contentসম্পত্তি মধ্যম আইটেমটি রাখা হবে না ধারক সম্পর্কে কেন্দ্রিক যদি সংলগ্ন আইটেম বিভিন্ন প্রস্থ আছে।

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFizz সংস্করণ

---

এই লেখার হিসাবে, সেখানে কোন কথা বলা হয়নি justify-selfবা justify-itemsএ flexbox বৈশিষ্ট ।

তবে, সিএসএস বক্স প্রান্তিককরণ মডিউলটিতে , যা সমস্ত বক্স মডেল জুড়ে ব্যবহারের জন্য সারিবদ্ধ বৈশিষ্ট্যের একটি সাধারণ সেট স্থাপনের জন্য ডাব্লু 3 সি এর অসম্পূর্ণ প্রস্তাব, এখানে রয়েছে:

                                                                                                                                                   _{সূত্র: ডাব্লু 3 সি}

আপনি এটি লক্ষ্য করবেন justify-selfএবং justify-itemsবিবেচনা করা হচ্ছে ... তবে ফ্লেক্সবক্সের জন্য নয় ।

---

আমি মূল প্রশ্নের পুনরাবৃত্তি দিয়ে শেষ করব:

কেন সেখানে কোনও "ন্যায়সঙ্গত আইটেম" এবং "ন্যায্যতা স্বরূপ" বৈশিষ্ট্য নেই?

Comments

আপনি কীভাবে justify-selfকোনও ফ্লেক্স আইটেমটির জন্য কাজ করবেন বলে আশা করবেন? ধরুন আপনার চারপাশে বিতরণ করার জন্য অতিরিক্ত জায়গা সহ আই, ক, বি, সি, ডি রয়েছে এবং ফ্লেক্স ধারকটি রয়েছে justify-content: space-betweenতাই সেগুলি শেষ হয়েছে | abcd | উদাহরণস্বরূপ justify-self: centerবা 'ন্যায্যতা স্ব-স্ব: ফ্লেক্স-এন্ড' কেবল আইটেম 'বি'তে যুক্ত করার অর্থ কী হবে ? আপনি কোথায় এটি আশা করবেন? (আমি এখানে একটি

— উত্তরে

(পর্যায়ক্রমে: ধরুন আমাদের কাছে আছে justify-content: flex-start, সুতরাং আইটেমগুলি শুরুতে ভিড় করা হয়েছে | | abcd | এর মতো। আপনি যদি justify-self: [anything]সেখানে আইটেম 'বি' রাখেন তবে আপনি এটি কী করবেন বলে আশা করবেন ?)

— hোলবার্ট

@ olোলবার্ট, আপনি লিখেছেন: আপনি justify-selfকোনও ফ্লেক্স আইটেমের জন্য কীভাবে কাজ করবেন বলে আশা করবেন? আমি বলব autoমার্জিনগুলি ইতিমধ্যে ফ্লেক্স আইটেমগুলিতে কাজ করে তার চেয়ে আলাদা নয় । আপনার দ্বিতীয় উদাহরণে, justify-self: flex-endআইটেমে d এটিকে প্রান্তে নিয়ে যাবে। এটি নিজেই একটি দুর্দান্ত বৈশিষ্ট্য হবে যা autoমার্জিনগুলি ইতিমধ্যে করতে পারে। আমি একটি বিক্ষোভ দিয়ে উত্তর পোস্ট করেছি।

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

আমি এখানে বেশিরভাগ ব্যবহারের কেস দেখতে পাচ্ছি, এবং ব্যবহারের কেসগুলি দুর্দান্ত - তবে কৌতূহলোদ্দীপকটি হ'ল কীভাবে এটিকে প্রকৃত উপায়ে সুনির্দিষ্ট করা যায় justify-contentএবং justify-selfসুনির্দিষ্ট করা হয়, যাতে দ্বন্দ্বের সাথে মামলাগুলি (যে পরিস্থিতিগুলির বিষয়ে আমি জিজ্ঞাসা করেছি) পরিষ্কারভাবে এবং সংজ্ঞায়িতভাবে সংজ্ঞায়িত করা হয়। যেমনটি আমি এখানে আমার জবাবটিতে উল্লেখ করেছি যে, বড় আকারের বাক্সের মধ্যে{justify|align}-self আইটেমগুলি সারিবদ্ধ করার{justify|align}-self বিষয়ে যা মূল্যকে স্বতন্ত্র আকারযুক্ত হয় - এবং কোনও ফ্লেক্স আইটেমটি সারিবদ্ধ করার জন্য মূল অক্ষে এমন কোনও বাক্স নেই।

— hোলবার্ট

আরআর "অটো মার্জিনের চেয়ে আলাদা নয়" - আমি আসলে জিজ্ঞাসা করছিলাম যে আপনি কীভাবে কল্পনা করেন justify-selfএবং justify-contentইন্টারঅ্যাক্ট করবেন সে ক্ষেত্রে যেখানে তারা বিরোধ সৃষ্টি করবে (আমি যে পরিস্থিতিতে দেখিয়েছি like অটো মার্জিনগুলি কেবল কোনওভাবেই ইন্টারঅ্যাক্ট করে নাjustify-content - justify-contentএটি ব্যবহারের সুযোগ পাওয়ার আগে তারা প্যাকিংয়ের সমস্ত জায়গা চুরি করে। সুতরাং, অটো মার্জিনগুলি কীভাবে এটি কাজ করবে তার জন্য কোনও ভাল এনালগ নয়।

— hোলবার্ট

Answer 1

প্রধান অক্ষ বরাবর ফ্লেক্স আইটেম সারিবদ্ধ করার পদ্ধতি

প্রশ্নে বলা হয়েছে:

প্রধান অক্ষ বরাবর ফ্লেক্স আইটেম সারিবদ্ধ করার জন্য একটি সম্পত্তি আছে: justify-content

ক্রস অক্ষ বরাবর সারিবদ্ধ আনমন আইটেম তিনটি বৈশিষ্ট্য আছে: align-content, align-itemsএবংalign-self ।

প্রশ্নটি তখন জিজ্ঞাসা করে:

কেন আছে justify-itemsএবং justify-selfসম্পত্তি আছে?

একটি উত্তর হতে পারে: কারণ এগুলি প্রয়োজনীয় নয়।

Flexbox স্পেসিফিকেশন প্রদান করে দুই প্রধান অক্ষ বরাবর আনমন আইটেম সমতলতা জন্য পদ্ধতি:

1. justify-contentশব্দ সম্পত্তি এবং
2. auto মার্জিন

---

ন্যায্যতা প্রতিপাদন করা-সামগ্রী

justify-contentসম্পত্তি প্রান্তিক আনমন ধারক প্রধান অক্ষ বরাবর আইটেম আনমন।

এটি ফ্লেক্স ধারকটিতে প্রয়োগ করা হয় তবে কেবল ফ্লেক্স আইটেমগুলিকেই প্রভাবিত করে।

পাঁচটি প্রান্তিককরণ বিকল্প রয়েছে:

• flex-start ~ ফ্লেক্স আইটেমগুলি লাইনের শুরুতে প্যাক করা হয়।

  

• flex-end ~ ফ্লেক্স আইটেমগুলি লাইনের শেষ দিকে প্যাক করা হয়।

  

• center ~ ফ্লেক্স আইটেমগুলি লাইনের কেন্দ্রের দিকে প্যাক করা হয়।

  

• space-between~ ফ্লেক্স আইটেমগুলি সমানভাবে ব্যবধানে থাকে, প্রথম আইটেমটি ধারকটির এক প্রান্তে প্রান্তিক হয় এবং শেষ আইটেমটি বিপরীত প্রান্তে প্রান্তিক থাকে। প্রথম এবং শেষ আইটেম দ্বারা ব্যবহৃত প্রান্তগুলি ( এবং ) মোডflex-direction এবং লিখনের উপর নির্ভর করে ।ltrrtl

  

• space-aroundBoth space-betweenউভয় প্রান্তে অর্ধ আকারের ফাঁকা জায়গা বাদে।

  

---

অটো মার্জিনস

সঙ্গে autoমার্জিন , ফ্লেক্স আইটেম, কেন্দ্রীভূত করা যাবে দূরে ব্যবধানে উপবিভাগের দলের মধ্যে বস্তাবন্দী।

বিপরীতে justify-content, যা ফ্লেক্স ধারকটিতে প্রয়োগ করা হয়, autoমার্জিনগুলি ফ্লেক্স আইটেমগুলিতে যায়।

তারা নির্দিষ্ট দিকের সমস্ত মুক্ত স্থান গ্রাস করে কাজ করে।

---

ডানদিকে ফ্লেক্স আইটেমগুলির গোষ্ঠী সারিবদ্ধ করুন, কিন্তু প্রথম আইটেমটি বামে

প্রশ্ন থেকে পরিস্থিতি:

• ফ্লেক্স আইটেমগুলির একটি গ্রুপ তৈরি করে ডান সারিবদ্ধ করুন ( justify-content: flex-end) তবে প্রথম আইটেমটি বামে সারিবদ্ধ করুন ( justify-self: flex-start)

  একটি গ্রুপ এনএভি আইটেম এবং একটি লোগো সহ একটি শিরোনাম বিভাগ বিবেচনা করুন। সঙ্গে justify-selfলোগো বাম প্রান্তিককৃত করা যেতে পারে যখন এনএভি আইটেম পর্যন্ত ডান থাকার, এবং বিভিন্ন পর্দা মাপ পুরো জিনিস adjusts সহজে ( "flexes")।

---

অন্যান্য দরকারী পরিস্থিতিতে:

---

কোণে একটি নমনীয় আইটেম রাখুন

প্রশ্ন থেকে পরিস্থিতি:

• একটি কোণে একটি ফ্লেক্স আইটেম স্থাপন .box { align-self: flex-end; justify-self: flex-end; }

---

উল্লম্ব এবং অনুভূমিকভাবে একটি ফ্লেক্স আইটেমকে কেন্দ্র করুন

margin: autojustify-content: centerএবং এর বিকল্প align-items: center।

ফ্লেক্স ধারকটিতে এই কোডের পরিবর্তে:

.container {
    justify-content: center;
    align-items: center;
}

আপনি এটি ফ্লেক্স আইটেমটিতে ব্যবহার করতে পারেন:

.box56 {
    margin: auto;
}

ধারকটি উপচে পড়া একটি ফ্লেক্স আইটেমকে কেন্দ্র করে এই বিকল্পটি কার্যকর ।

---

একটি নমনীয় আইটেমটি কেন্দ্র করুন এবং প্রথম এবং প্রান্তের মধ্যে একটি দ্বিতীয় ফ্লেক্স আইটেমকে কেন্দ্র করুন

একটি ফ্লেক্স ধারক মুক্ত স্থান বিতরণ করে ফ্লেক্স আইটেমগুলিকে সারিবদ্ধ করে।

সুতরাং, সমতা ভারসাম্য তৈরি করার জন্য , যাতে একটি মাঝারি আইটেমটি পাশাপাশি একটি একক আইটেমের সাথে পাত্রে কেন্দ্রীভূত করা যায়, অবশ্যই একটি কাউন্টারবালেন্স চালু করা উচিত।

নীচের উদাহরণগুলিতে, "আসল" আইটেমগুলিতে ভারসাম্য বজায় রাখতে inv১ এবং) 68 বাক্সে অদৃশ্য তৃতীয় ফ্লেক্স আইটেমগুলি চালু করা হয়েছে (63৩ এবং box boxes বাক্স)।

অবশ্যই, শব্দার্থবিজ্ঞানের দিক থেকে এই পদ্ধতিটি দুর্দান্ত কিছু নয়।

বিকল্পভাবে, আপনি একটি আসল DOM উপাদান পরিবর্তে একটি সিউডো-উপাদান ব্যবহার করতে পারেন। অথবা আপনি নিখুঁত অবস্থান ব্যবহার করতে পারেন। তিনটি পদ্ধতিই এখানে আচ্ছাদিত রয়েছে: কেন্দ্র এবং নীচে-প্রান্তরে ফ্লেক্স আইটেমগুলি

দ্রষ্টব্য: উপরের উদাহরণগুলি কেবলমাত্র কাজ করবে - সত্য কেন্দ্রের ক্ষেত্রে - যখন বাইরেরতম আইটেমগুলি সমান উচ্চতা / প্রস্থ হয়। ফ্লেক্স আইটেমগুলি বিভিন্ন দৈর্ঘ্যের হয়, পরবর্তী উদাহরণ দেখুন।

---

সংলগ্ন আইটেম আকারে পরিবর্তিত হলে একটি নমনীয় আইটেমটি কেন্দ্র করুন

প্রশ্ন থেকে পরিস্থিতি:

• তিনটি ফ্লেক্স আইটেমের এক সারিতে মাঝারি আইটেমটি ধারকটির ( justify-content: center) কেন্দ্রে সংযুক্ত করুন এবং সংলগ্ন আইটেমগুলিকে ধারক প্রান্তে ( justify-self: flex-startএবং justify-self: flex-end) প্রান্তিক করুন ।

  লক্ষ্য করুন মান space-aroundএবং space-betweenউপর justify-contentসম্পত্তি মধ্যম আইটেমটি রাখা হবে না ধারক সম্পর্কিত কেন্দ্রিক যদি সংলগ্ন আইটেম বিভিন্ন প্রস্থ (আছে ডেমো দেখতে )।

যেমন উল্লেখ করা হয়েছে, যতক্ষণ না সমস্ত ফ্লেক্স আইটেমগুলি সমান প্রস্থ বা উচ্চতার হয় (উপর নির্ভর করে flex-direction), মধ্যবর্তী আইটেমটি সত্যই কেন্দ্রিক হতে পারে না। এই সমস্যাটি কোনও justify-selfসম্পত্তির জন্য শক্তিশালী কেস তৈরি করে (অবশ্যই টাস্কটি পরিচালনা করার জন্য ডিজাইন করা হয়েছে))

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

এই সমস্যাটি সমাধানের জন্য এখানে দুটি পদ্ধতি:

সমাধান # 1: সম্পূর্ণ পজিশনিং

ফ্লেক্সবক্স স্পেক ফ্লেক্স আইটেমগুলির নিখুঁত অবস্থানের জন্য অনুমতি দেয় । এটি মধ্যম আইটেমটি তার ভাইবোনদের আকার নির্বিশেষে নিখুঁতভাবে কেন্দ্রীভূত করতে সহায়তা করে।

কেবল মনে রাখবেন যে, সমস্ত একেবারে অবস্থানযুক্ত উপাদানগুলির মতো, আইটেমগুলি দস্তাবেজের প্রবাহ থেকে সরানো হয় । এর অর্থ তারা পাত্রে জায়গা নেয় না এবং তাদের ভাইবোনদের ওভারল্যাপ করতে পারে।

নীচের উদাহরণগুলিতে, মাঝারি আইটেমটি নিখুঁত অবস্থানের সাথে কেন্দ্রীভূত এবং বাইরের আইটেমগুলি প্রবাহিত থাকে। তবে একই লেআউটটি বিপরীত ফ্যাশনে অর্জন করা যায়: মধ্যবর্তী আইটেমটি কেন্দ্র করে justify-content: centerএবং বাইরের আইটেমগুলিকে একেবারে অবস্থান দিন।

সমাধান # 2: নেস্টেড ফ্লেক্স পাত্রে (নিখুঁত অবস্থান নেই)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

এখানে কিভাবে এটা কাজ করে:

• শীর্ষ স্তরের ডিভ ( .container) একটি ফ্লেক্স পাত্রে।
• প্রতিটি শিশু ডিভ ( .box) এখন একটি নমনীয় আইটেম।
• প্রতিটি .boxআইটেমটি flex: 1ধারক স্থান সমানভাবে বিতরণ করার জন্য দেওয়া হয়।
• এখন আইটেমগুলি সারির সমস্ত স্থান গ্রাস করছে এবং সমান প্রস্থে।
• প্রতিটি আইটেমকে একটি (নেস্টেড) ফ্লেক্স পাত্রে তৈরি করুন এবং যুক্ত করুন justify-content: center।
• এখন প্রতিটি spanউপাদান একটি কেন্দ্রিক ফ্লেক্স আইটেম।
• autoবাহ্যিক spanবাম এবং ডান স্থানান্তর করতে ফ্লেক্স মার্জিন ব্যবহার করুন ।

আপনি একচেটিয়াভাবে মার্জিনগুলিও রেখে যেতে justify-contentএবং ব্যবহার করতে পারেন auto।

তবে justify-contentএখানে কাজ করতে পারেন কারণ autoমার্জিনের সর্বদা অগ্রাধিকার থাকে। অনুমান থেকে:

8.1। auto মার্জিনের সাথে সারিবদ্ধ হচ্ছে

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

---

জাস্টিফাই-কনটেন্ট: স্পেস-সম (ধারণা)

justify-contentএক মিনিটের জন্য ফিরে যেতে , আরও একটি বিকল্পের জন্য এখানে একটি ধারণা।

• space-sameHy এর হাইব্রিড space-betweenএবং space-around। ফ্লেক্স আইটেমগুলি space-betweenউভয় প্রান্তে (পছন্দ মতো space-around) অর্ধ-আকারের স্থানের পরিবর্তে সমানভাবে ব্যবধানযুক্ত (যেমন ) হয়, উভয় প্রান্তে পূর্ণ আকারের ফাঁকা স্থান রয়েছে।

এই লেআউটটি ফ্লেক্স ধারকটিতে সিউডো-এলিমেন্ট সহ ::beforeএবং অর্জন করা যেতে পারে ::aftero

^{(ক্রেডিট: কোডের জন্য @রিওল , এবং লেবেলের জন্য @ সিআরএল )}

আপডেট: ব্রাউজারগুলি প্রয়োগ শুরু করেছে space-evenly, যা উপরেরটি সম্পাদন করে। বিশদগুলির জন্য এই পোস্টটি দেখুন: ফ্লেক্স আইটেমগুলির মধ্যে সমান স্থান

---

প্লেগ্রাউন্ড (উপরের সমস্ত উদাহরণের কোড সহ)

Comments

উত্তর কভার উপরে প্রধান অক্ষ , justify-contentএবং autoমার্জিন। মুদ্রা ওপারে জন্য - ক্রস অক্ষ , align-items, align-selfএবং align-content: - এই পোস্টটিকে দেখতে পারবেন stackoverflow.com/q/42613359/3597276

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

@ মারকডাব্লু, আপনি justify-selfসম্পত্তিটির জন্য মামলা করছেন ... autoমার্জিন সহায়ক, তবে justify-self: centerআদর্শ হবে। আপনার উপস্থাপিত সমস্যাটি সমাধান করার উপায় হ'ল বিপরীত দিকে অদৃশ্য নকল আইটেম তৈরি করা। আমার উত্তর এখানে দেখুন: stackoverflow.com/q/38948102/3597276

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

আপনার space-sameধারণা এখন একটি বাস্তব জিনিস। এটি বলা হয়ে থাকে space-evenlyতবে এটি কেবল এই মুহূর্তে ফায়ারফক্স দ্বারা সমর্থিত: বিকাশকারী.মোজিলা.আর.ইন.ইউএস

— ডকস

@ বেনফেস, হ্যাঁ, আপনি ঠিক বলেছেন। যে ইশারা জন্য ধন্যবাদ। আমি আসলে space-evenlyঅন্যান্য উত্তরে

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

প্রকৃতপক্ষে, ক্রোম 57-60 এ সমর্থিত space-evenly ছিল তবে কেবল গ্রিড বিন্যাসের জন্য। এটি একটি বাগ ছিল যা ঠিক করা হয়েছে এবং ক্রম 61১-এর পর থেকে এটি ফ্লেক্সবক্সের জন্যও সমর্থিত। এছাড়াও, পথ ছাড়া সিউডো-উপাদানের এটা অনুকরণ হল: .item { margin-right: auto } .item:first-child { margin-left: auto }।

— ইলিয়া স্ট্রেলটসিন

Answer 2

আমি জানি এটি কোনও উত্তর নয় তবে আমি এটির পক্ষে মূল্যবান বিষয়গুলির জন্য এই ক্ষেত্রে অবদান রাখতে চাই। তারা justify-selfফ্লেক্সবক্সকে সত্যিকারের নমনীয় করে তুলতে মুক্তি দিতে পারলে দুর্দান্ত হবে ।

এটি আমার বিশ্বাস যে অক্ষটিতে যখন একাধিক আইটেম থাকে তখন justify-selfআচরণ করার সর্বাধিক যৌক্তিক উপায় হ'ল নীচের মতো প্রদর্শিত তার নিকটবর্তী প্রতিবেশী (বা প্রান্ত) এর সাথে নিজেকে সামঞ্জস্য করা।

আমি সত্যই আশা করি, ডাব্লু 3 সি এটির নজরে নেয় এবং কমপক্ষে এটি বিবেচনা করবে। =)

বাম এবং ডান বাক্সের আকার নির্বিশেষে আপনার কাছে এমন একটি আইটেম থাকতে পারে যা সত্যই কেন্দ্রিক। বাক্সগুলির মধ্যে একটি কেন্দ্র বাক্সের বিন্দুতে পৌঁছে গেলে বিতরণ করার মতো আরও জায়গা না পাওয়া পর্যন্ত এটি কেবল এটিকে চাপ দেবে।

দুর্দান্ত লেআউটগুলি তৈরির স্বাচ্ছন্দ্য অবিরাম, এই "জটিল" উদাহরণটি দেখুন।

Comments

@ মার্ক এটি আশ্চর্যজনক! এটি খসড়া করার জন্য সময় দেওয়ার জন্য আপনাকে ধন্যবাদ। আমি আশা করি আপনার আপত্তি নেই তবে আমি এটি এখানে জমা দিয়েছি: ডিসকোর্স.উইক.ইউ

— ফ্লেক্সবক্স- জাস্টিফাই- নিজে- প্রপার্টি

@ যাকাক্স নিশ্চিত, আরও এক্সপোজার আরও ভাল। সিরিয়াসলি আশা করি তারা এই বাস্তবতাটি তৈরি করার কোনও উপায় খুঁজে পাবে, এতে আমার হাত নোংরা করতে পছন্দ করবে।

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

হাই মার্ক, @ জাএক্সএক্স, আমি একটি উত্তর পোস্ট করেছি যা এই উত্তরে উল্লিখিত কিছু ব্যবহারের ক্ষেত্রে কভার করতে পারে। আমি আবিষ্কার করেছি যে মূল অক্ষে প্রয়োজন ছাড়াই এখনও অনেক কিছু করা যায় justify-selfএবং justify-items।

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

@ মিশেল_বি খুশি যে আপনি ফ্লেক্সবক্স সম্পর্কে আরও শিখছেন এবং কৃতজ্ঞ যে আপনি নিজের নোটগুলিকে উত্তরে ফর্ম্যাট করতে সময় নিয়েছিলেন। মার্জিন: অটো প্রকৃতপক্ষে দুর্দান্ত (যদিও আপনি ব্রাউজারগুলি খুঁজে পেয়েছেন যেগুলি ২০০৯ এবং ২০১২ এর ফ্লেক্সবক্স স্পেসের সংস্করণগুলির কোনও সমতুল্য বৈশিষ্ট্য নেই যা কোনও প্রোডাকশন সাইটে এটি ব্যবহারের ক্ষমতা হ্রাস করে)। তবে, এমনকি মার্জিন সমর্থনকারী ব্রাউজারগুলির সাথেও: স্বয়ংক্রিয়ভাবে, স্থান উপস্থিত থাকা অবস্থায় তার আইটেমটির তুলনামূলকভাবে কেন্দ্রীভূত কোনও আইটেমের মূল ব্যবহারের ক্ষেত্রটি ন্যায়সঙ্গত-স্ব সম্পত্তি বা অনুরূপ ব্যতীত এখনও অসম্ভব।

— জাকাক্স

@ জাএক্সএক্স, প্রতিক্রিয়ার জন্য ধন্যবাদ। এবং হ্যাঁ, আমি আপনার সাথে একমত, autoমার্জিনগুলি সম্পূর্ণ বিকল্প নয় justify-self। আমি আমার পূর্ববর্তী মন্তব্যটি autoমার্জিনটি ব্যবহারের কয়েকটি বিষয় কভার করে বলার বিষয়ে সতর্ক ছিলাম । যেমন আপনি উল্লেখ করেছেন, সংলগ্ন আইটেমগুলি বিভিন্ন আকারের হয় তখন এটি কোনও আইটেমটি ঠিক জায়গায় রাখতে পারে না। তবে এটি ফ্লেক্স আইটেমগুলি সারিবদ্ধ করার জন্য আরও বিকল্প সরবরাহ করে provide আমি প্রথম যখন ফ্লেক্সবক্স সম্পর্কে শিখতে শুরু করি তখন আমি ভেবেছিলাম justify-contentএবং অদৃশ্য স্পেসার আইটেমগুলি একমাত্র উপায় ছিল।

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

Answer 3

এটি www- শৈলীর তালিকায় জিজ্ঞাসা করা হয়েছিল এবং ট্যাব অ্যাটকিন্স (স্পেস সম্পাদক) এর কারণ ব্যাখ্যা করে একটি উত্তর সরবরাহ করেছিলেন । আমি এখানে কিছুটা বিশদভাবে বর্ণনা করব।

শুরু করার জন্য, শুরুতে ধরে নেওয়া যাক আমাদের ফ্লেক্স ধারকটি একক-লাইন ( flex-wrap: nowrap)। এই ক্ষেত্রে, প্রধান অক্ষ এবং ক্রস অক্ষের মধ্যে স্পষ্টতই একটি প্রান্তিককরণের পার্থক্য রয়েছে - মূল অক্ষে সজ্জিত একাধিক আইটেম রয়েছে তবে ক্রস অক্ষে সজ্জিত কেবল একটি আইটেম রয়েছে। সুতরাং ক্রস অক্ষের মধ্যে কাস্টমাইজযোগ্য-প্রতি-আইটেম "অ্যালাইন-সেল্ফ" থাকা (যেহেতু প্রতিটি আইটেম পৃথকভাবে পৃথকভাবে সংযুক্ত করা হয়েছে) থাকা বোধগম্য হয়, যদিও এটি মূল অক্ষটিতে অর্থ দেয় না (যেহেতু, আইটেমগুলি সম্মিলিতভাবে প্রান্তিক করা হয়)।

মাল্টি-লাইন ফ্লেক্সবক্সের জন্য, একই যুক্তি প্রতিটি "ফ্লেক্স লাইনে" প্রযোজ্য। প্রদত্ত লাইনে আইটেমগুলি পৃথকভাবে ক্রস অক্ষের সাথে সংযুক্ত থাকে (যেহেতু লাইন প্রতি এক আইটেম ক্রস অক্ষে থাকে), বনাম বনাম সম্মিলিতভাবে মূল অক্ষরেখায়।

---

এখানে এটির বাক্যকরণের আরেকটি উপায়: সুতরাং, সমস্ত বৈশিষ্ট্য *-selfএবং *-contentবৈশিষ্ট্যগুলি কীভাবে জিনিসগুলির চারপাশে অতিরিক্ত স্থান বিতরণ করতে হয় সে সম্পর্কে। কিন্তু কী পার্থক্য যে *-selfসংস্করণ ক্ষেত্রে যেখানে আছে জন্য শুধু তাই অক্ষ একটি একক জিনিস , এবং *-contentসংস্করণ আছে যখন সম্ভাব্য তাদের জন্য হয় যে অক্ষ মধ্যে অনেক কিছু । এক-জিনিস বনাম বহু জিনিসগুলির পরিস্থিতিতে বিভিন্ন ধরণের সমস্যা এবং তাই তাদের বিভিন্ন ধরণের বিকল্প উপলব্ধ রয়েছে - উদাহরণস্বরূপ, space-around/ space-betweenমানগুলি বোঝায় *-contentতবে তা নয় *-self।

এসও: ফ্লেক্সবক্সের মূল অক্ষে, চারপাশে স্থান বিতরণ করার জন্য অনেক কিছুই রয়েছে। সুতরাং একটি *-contentসম্পত্তি সেখানে বোঝায়, কিন্তু *-selfসম্পত্তি নয়।

বিপরীতে, ক্রস অক্ষের মধ্যে, আমাদের দুটি *-selfএবং একটি *-contentসম্পত্তি রয়েছে। একটি নির্ধারণ করে যে আমরা কীভাবে অনেকগুলি ফ্লেক্স লাইনের চারপাশে স্থানটি বিতরণ করব ( align-contentঅন্যটি align-self) নির্ধারণ করে যে কোনও নির্দিষ্ট ফ্লেক্স লাইনের মধ্যে ক্রস অক্ষের স্বতন্ত্র ফ্লেক্স আইটেমগুলির চারপাশে স্থান কীভাবে বিতরণ করা যায় ।

(আমি *-itemsএখানে সম্পত্তিগুলি উপেক্ষা করছি , যেহেতু তারা কেবল ডিফল্ট স্থাপন করে *-self))

Comments

আমি বুঝতে পারি যে কোনও justify-selfআইটেমের বিপরীতে একাধিক আইটেমগুলির সাথে অক্ষের মধ্যে কীভাবে সমস্যা হতে পারে। তবে আমি সত্যিই আশা করি যে তারা একাধিক আইটেমের পরিস্থিতিতে কীভাবে justify-selfআচরণ করবে তা আরও খতিয়ে দেখবে , কারণ এমন কিছু পরিস্থিতি রয়েছে যেখানে এটি সত্যিই কার্যকর হতে পারে। উদাহরণস্বরূপ ( স্ট্যাকওভারফ্লো . com / প্রশ্নগুলি / ৩৩৩৩78৮৯৯৩ / / )।

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

মেলিং তালিকায় খুব ভাল লাগছে। আমার মাথাটি এটি ঘিরে রাখার চেষ্টা করছি, কারণ আমি এখনও ব্যবহারের জন্য ভাল ব্যবহারের সম্ভাবনা দেখতে পাচ্ছি justify-self।

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

আমি কিছুটা আরও স্পেসিফিকেশন যুক্ত করেছি, *-selfযেখানে আমাদের কেবলমাত্র একটি জিনিস প্রান্তিককরণের *-contentক্ষেত্রে রয়েছে সেগুলি সম্পর্কে কীভাবে ব্যাখ্যা করা হয়েছে যেখানে আমাদের অনেকগুলি বিষয় সারিবদ্ধ করার জন্য রয়েছে। এটি কি কিছুটা পরিষ্কার করে দেয়?

— hোলবার্ট

হ্যাঁ, এটি আরও পরিষ্কার। আমি ব্যাখ্যা প্রশংসা করি। তবে এটি সমস্তই যুক্তি ভিত্তিক কোনও নির্দিষ্ট প্রয়োজনের ভিত্তিতে নয়, অনুমিত লেখকের একটি সাধারণ পছন্দ হিসাবে ফুটে উঠেছে। আপনি যে মেলিং তালিকাটি উল্লেখ করেছেন তা থেকে : * স্ব-স্ব বৈশিষ্ট্যগুলি কেবল তখনই কাজ করে যদি শিশু that অক্ষরে সমস্ত একা থাকে। কেন? এটির কোনও প্রয়োজন বলে মনে হয় না। এটি একটি স্বেচ্ছাসেবী সিদ্ধান্ত। একটি পছন্দ। প্রকৃতপক্ষে, autoমার্জিনগুলিও, অনুমানের অংশ, লাইনে একাধিক আইটেমগুলির সাথে * স্ব-প্রান্তিককরণ সক্ষম করে। কীওয়ার্ডের বৈশিষ্ট্যগুলি কেন না পারে তার কোনও স্পষ্ট কারণ নেই।

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

Answer 4

আমি জানি এটি ফ্লেক্সবক্স ব্যবহার করে না, তবে তিনটি আইটেমের সরল ব্যবহারের ক্ষেত্রে (একটি বাম দিকে, একটি কেন্দ্রে, একটি ডানদিকে), display: gridএটি পিতামাতার, grid-area: 1/1/1/1;বাচ্চাদের এবং justify-selfঅবস্থানের জন্য ব্যবহার করে সহজেই সম্পাদন করা যায় এই শিশুদের।

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Comments

উত্তরের জন্য ধন্যবাদ, তবে এটি সত্যই প্রশ্নের উত্তর দেয় না। এছাড়াও, আপনার বিন্যাসটি সম্পন্ন করার একটি সহজ উপায় রয়েছে: jsfiddle.net/fga89m2o

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

Answer 5

আমি এই সমস্যাটির জন্য আমার নিজের সমাধানটি খুঁজে পেয়েছি বা কমপক্ষে আমার সমস্যার।
আমি এর justify-content: space-aroundপরিবর্তে ব্যবহার করছিলাম justify-content: space-between;।

এইভাবে শেষ উপাদানগুলি উপরের এবং নীচে আটকে থাকবে এবং আপনি চাইলে আপনার পছন্দসই মার্জিন থাকতে পারে।