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




css3 flexbox (4)

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

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

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

ক্রস অক্ষের সাথে ফ্লেক্স আইটেমগুলি সারিবদ্ধ করতে এখানে তিনটি বৈশিষ্ট্য রয়েছে: align-content , align-items

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

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

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

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

  1. justify-content কীওয়ার্ড সম্পত্তি এবং
  2. auto মার্জিন

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

justify-content সম্পত্তি ফ্লেক্স ধারকগুলির মূল অক্ষ বরাবর ফ্লেক্স আইটেমগুলি সারিবদ্ধ করে।

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

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

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

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

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

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

  • space-around both উভয় প্রান্তে অর্ধ-আকারের ফাঁকা স্থান বাদে space-between হিসাবে একই।

অটো মার্জিনস

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

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

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

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

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

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

    একটি গ্রুপ এনএভি আইটেম এবং একটি লোগো সহ একটি শিরোনাম বিভাগ বিবেচনা করুন। justify-self দিয়ে লোগোটি বামদিকে সারিবদ্ধ হতে পারে যখন নাভ আইটেমগুলি আরও ডানদিকে থাকে এবং পুরো জিনিসটি সহজেই ("ফ্লেক্স") বিভিন্ন স্ক্রিন আকারের সাথে সামঞ্জস্য করে।

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

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

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

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

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

margin: auto justify-content: center এবং align-items: center জন্য margin: auto একটি বিকল্প।

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

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

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

.box56 {
    margin: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

এই লেআউটটি ::before এবং ::after ফ্লেক্স ধারকটিতে সিউডো-উপাদানগুলির ::after অর্জন করা যেতে পারে।

(ক্রেডিট: @oriol জন্য @crl , এবং @crl জন্য @crl )

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

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

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

সূত্র: W3C

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

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

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

তবে এই দিকনির্দেশগুলি সহজেই 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 কেন একটি align-content একত্রিত করা হয়?

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

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

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

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

    একটি গ্রুপ এনএভি আইটেম এবং একটি লোগো সহ একটি শিরোনাম বিভাগ বিবেচনা করুন। justify-self দিয়ে লোগোটি বামদিকে সারিবদ্ধ হতে পারে যখন নাভ আইটেমগুলি আরও ডানদিকে থাকে এবং পুরো জিনিসটি সহজেই ("ফ্লেক্স") বিভিন্ন স্ক্রিন আকারের সাথে সামঞ্জস্য করে।

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

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

#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 middle box will only be truly centered if adjacent boxes are equal width</p>

jsFizz সংস্করণ

এই লেখার হিসাবে, ফ্লেক্সবক্স স্পপে justify-self বা justify-items কোনও উল্লেখ নেই।

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

সূত্র: W3C

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

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

কেন কোনও "ন্যায়সঙ্গত আইটেম" এবং "ন্যায্যতা স্ব-স্বীকৃতি" বৈশিষ্ট্য নেই?


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

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

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

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

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


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

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

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

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

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

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

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


justify-self , তবে ক্রোম ক্যানারিতে, ক্রোম স্থিতিশীল সংস্করণে নয়। এমনকি justify-items :

তবে যতদূর আমি বলতে পারি সেই বৈশিষ্ট্যগুলিও কাজ করে না। তাই সম্ভবত গুগল এটি ভবিষ্যতে সিএসএস রিলিজের জন্য আগেই সংরক্ষণ করেছিল। শুধুমাত্র আশা করা যায় তারা শীঘ্রই বৈশিষ্ট্যগুলি যুক্ত করবে।







w3c