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

Question

কেহ আমাকে মধ্যে পার্থক্য দেখাতে পারেন align-itemsএবং align-content?

Comments

আইটেমগুলি সারিবদ্ধ করুন এবং সামগ্রী সারিবদ্ধ করুন

— jbutler483

আমি ইতিমধ্যে ক্রিসের আলমানাক খনন করেছিলাম তবে এখনও স্পষ্ট হয়ে

— দিংহ

এখানে পছন্দের নামগুলি এত বিভ্রান্ত! মনে হয় ঠিক এত বেপরোয়া নামকরণ জিনিস!

— vsync

stackoverflow.com/q/42613359/3597276

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

Answer 1

align-itemsআনমন-বাক্সের সম্পত্তি ক্রস অক্ষ ঠিক বরাবর একটি আনমন ধারক ভিতরে আইটেম সাজায় justify-contentপ্রধান অক্ষ বরাবর আছে। (ডিফল্টর flex-direction: rowজন্য ক্রস অক্ষটি উল্লম্বের সাথে মিলিত হয় এবং মূল অক্ষটি অনুভূমিকের সাথে মিলে যায় flex-direction: columnthose এই দুটিটির সাথে যথাক্রমে আন্তঃসংযোগ হয়)।

কীভাবে align-items:centerদেখায় তার উদাহরণ এখানে :

তবে align-contentমাল্টি লাইন নমনীয় বাক্সগুলির জন্য। আইটেমগুলি একটি লাইনে থাকলে এর কোনও প্রভাব নেই। এটি পুরো মানটিকে তার মান অনুসারে সারিবদ্ধ করে। এখানে একটি উদাহরণ এখানে align-content: space-around;:

চেহারাগুলির align-content: space-around;সাথে এখানে কীভাবে রয়েছে align-items:center:

প্রথম লাইনের পরিবর্তে 3 য় বাক্স এবং অন্যান্য সমস্ত বাক্স নোট করুন যে লাইনটি উল্লম্বভাবে কেন্দ্রে পরিণত হয়েছে।

এখানে খেলতে কিছু কোডেন লিংক রয়েছে:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

এখানে একটি দুর্দান্ত শীতল কলম যা আপনাকে ফ্লেক্সবক্সের প্রায় প্রতিটি জিনিস দিয়ে দেখায় এবং খেলতে দেয়।

Comments

নোট করুন যে align-*বৈশিষ্ট্যগুলি ফ্লেক্স আইটেমগুলি অনুভূমিকভাবে স্থানান্তর করতে পারে। এটা নির্ভর করে flex-direction। stackoverflow.com/q/32551291/3597276

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

এটি সহজেই সেরা ব্যাখ্যা is বাকি সবাই খারাপভাবে ব্যর্থ হয়।

— অর্টোনমি

> "তবে সারিবদ্ধ সামগ্রীটি মাল্টি লাইন নমনীয় বাক্সগুলির জন্য। আইটেমগুলি যখন একক লাইনে থাকে তখন এর কোনও প্রভাব থাকে না" - সর্বশেষ ফায়ারফক্সে (মে 2020) এটি সত্য হবে না বা সম্মানিত হবে না বলে মনে হয়। পরিবর্তে, যদি একটি একক ফ্লেক্স-লাইন থাকে (সমস্ত বিষয়বস্তু মূল-অক্ষের দৈর্ঘ্যের তুলনায় কম ফিট হয়ে থাকে) যা পুরো উচ্চতার চেয়ে কম (ক্রস-অক্ষের আকার সম্পূর্ণ উপলব্ধের চেয়ে কম), তবে সেটটি বিন্যস্ত করলে বিন্যস্ত- আইটেম। এটি উপলব্ধি করে: এটি যে কোনও লাইন এটির ক্ষেত্রে প্রয়োগ করে?

— অ্যাডাম

Answer 2

আমি http://flexboxfroggy.com/ উদাহরণটি খুব দরকারী।

এটি আপনাকে 10-20 মিনিট সময় নেবে এবং 21 স্তরে আপনি আপনার প্রশ্নের উত্তর খুঁজে পাবেন। এটি উল্লেখ করা হয়েছে:

সারিবদ্ধ-সামগ্রী লাইনগুলির মধ্যে ব্যবধান নির্ধারণ করে, যখন সারিবদ্ধ-আইটেমগুলি নির্ধারণ করে যে সামগ্রিকভাবে আইটেমগুলি ধারকটির মধ্যে কীভাবে প্রান্তিক হয়। যখন কেবল একটি লাইন থাকে, সারিবদ্ধ-সামগ্রীটির কোনও প্রভাব থাকে না

Comments

সত্যই, আমি ব্যাঙের উদাহরণটি সত্যিই দরকারী বলে খুঁজে পেয়েছি। এটি থেকে অনেক কিছু শিখেছি।

— স্পিক্যাট্রিক্স

Answer 3

প্রথমত, align-itemsএকক সারিতে থাকা আইটেমগুলির জন্য। সুতরাং মূল অক্ষের একক সারির জন্য , align-itemsএই আইটেমগুলি একে অপরের সাথে সম্পর্কিত করে তুলবে এবং এটি পরবর্তী সারি থেকে নতুন দৃষ্টিভঙ্গি দিয়ে শুরু হবে।

এখন, align-contentএকটি সারিতে আইটেমগুলিতে হস্তক্ষেপ করে না তবে সারিগুলির সাথেই । সুতরাং, align-contentএকে অপরের সাথে সম্মতি এবং ফ্লেক্স পাত্রে সারি সারিবদ্ধ করার চেষ্টা করবে।

এই ফিডলটি দেখুন: https://jsfiddle.net/htym5zkn/8/

Answer 4

আমারও একই বিভ্রান্তি ছিল। উপরের উত্তরগুলির উপর ভিত্তি করে কিছু টিঙ্কিংয়ের পরে, আমি শেষ পর্যন্ত পার্থক্যগুলি দেখতে পাচ্ছি। আমার নম্র মতে, পার্থক্যটি একটি ফ্লেক্স পাত্রে ভালভাবে প্রদর্শিত হয় যা নিম্নলিখিত দুটি শর্ত পূরণ করে:

1. ফ্লেক্স পাত্রে নিজেই একটি উচ্চতার সীমাবদ্ধতা থাকে (যেমন, min-height: 60rem) এবং এটি এর সামগ্রীর জন্য খুব দীর্ঘ হয়ে যেতে পারে
2. পাত্রে আবদ্ধ শিশু আইটেমগুলির অসম উচ্চতা রয়েছে

---

শর্তাদি 1 আমাকে contentতার পাত্রে ধারকটির তুলনায় কী বোঝায় তা বুঝতে সহায়তা করে । সামগ্রীটি যখন ধারকটির সাথে ফ্লাশ হয় তখন আমরা কোনও অবস্থানের প্রভাবগুলি দেখতে পাব না align-content। এটি কেবলমাত্র যখন আমাদের ক্রস অক্ষের সাথে অতিরিক্ত স্থান থাকে, আমরা এর প্রভাবটি দেখতে শুরু করি: এটি পাত্রে ধারকটির সীমানার সাথে সম্পর্কিত সামগ্রীটিকে সারিবদ্ধ করে।

শর্ত 2 আমাকে এর প্রভাবগুলি দেখতে সাহায্য করে align-items: এটি একে অপরের সাথে সম্পর্কিত আইটেমগুলিকে সারিবদ্ধ করে।

---

এখানে একটি কোড উদাহরণ। ওয়েস বোসের সিএসএস গ্রিড টিউটোরিয়াল থেকে কাঁচামাল আসে (21. ফ্লেক্সবক্স বনাম সিএসএস গ্রিড)

• এইচটিএমএল উদাহরণ:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• সিএসএস উদাহরণ:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

---

উদাহরণ 1 : আসুন ভিউপোর্টটি সংকুচিত করুন যাতে সামগ্রীটি ধারকটির সাথে ফ্লাশ হয়। এই যখন align-content: flex-start;কোন প্রভাব যেহেতু সমগ্র সামগ্রী অবরোধ ধারক ভিতরে শক্তভাবে মাপসই করা আছে (repositioning জন্য কোন অতিরিক্ত রুম!)

এছাড়াও, ২ য় সারিতে নোট করুন - দেখুন কীভাবে আইটেমগুলি একে অপরের মধ্যে প্রান্তিক হয়।

উদাহরণ 2 : আমরা ভিউপোর্টটি প্রশস্ত করার সাথে সাথে আমাদের কাছে পুরো ধারকটি পূরণ করার মতো পর্যাপ্ত সামগ্রী নেই। এখন আমরা align-content: flex-start;--it এর প্রভাবগুলি ধারকটির উপরের প্রান্তের সাথে সম্পর্কিত সামগ্রীর প্রান্তিককরণটি দেখতে শুরু করি ।

---

এই উদাহরণগুলি ফ্লেক্সবক্সের উপর ভিত্তি করে, তবে একই নীতিগুলি সিএসএস গ্রিডে প্রযোজ্য। আশাকরি এটা সাহায্য করবে :)

Answer 5

ভাল আমি তাদের আমার ব্রাউজারে পরীক্ষা করেছি।

align-contentযখন এটি মূল্য প্রসারিত হয় কলামের জন্য সারি দিক বা প্রস্থের জন্য একটি লাইন উচ্চতা পরিবর্তন করতে পারেন বা মধ্যবর্তী বা লাইন প্রায় খালি জায়গা যোগ space-between, space-around, flex-start, flex-end values।

align-itemsলাইনের ক্ষেত্রের ভিতরে আইটেমের উচ্চতা বা অবস্থান পরিবর্তন করতে পারে। আইটেমগুলি মোড়ানো না হলে তাদের কেবলমাত্র একটি লাইন থাকে যা এর অঞ্চলটি সর্বদা ফ্লেক্স-বক্স অঞ্চলে প্রসারিত থাকে (এমনকি আইটেমগুলি উপচে পড়ে গেলেও) এবং align-contentকোনও একক লাইনে তার কোনও প্রভাব পড়ে না। সুতরাং মোড়ানো না থাকা আইটেমগুলিতে এর কোনও প্রভাব নেই এবং কেবলমাত্র align-itemsতারা সমস্ত একক লাইনে থাকলে আইটেমের অবস্থান পরিবর্তন করতে বা প্রসারিত করতে পারে।

তবে এগুলি মোড়ানো থাকলে প্রতিটি লাইনের ভিতরে আপনার একাধিক লাইন এবং আইটেম থাকে have এবং যদি প্রতিটি লাইনের সমস্ত আইটেমের উচ্চতা একই থাকে (সারি দিকের জন্য) যে রেখার উচ্চতা সেই আইটেমগুলির উচ্চতার সমান হবে এবং আপনি align-itemsমান পরিবর্তন করে কোনও প্রভাব দেখতে পাবেন না ।

সুতরাং আপনি যদি align-itemsআপনার আইটেমগুলি মোড়ানো হয় এবং একই উচ্চতা (সারি দিকের জন্য) থাকে তখন আপনি আইটেমগুলিকে প্রভাবিত করতে চান align-contentতবে লাইনের ক্ষেত্রটি প্রসারিত করতে আপনাকে প্রথমে প্রসারিত মান সহ ব্যবহার করতে হবে ।

Answer 6

সারিবদ্ধ-সামগ্রী

align-contentনিয়ন্ত্রণগুলি ক্রস অক্ষ (অর্থাত উল্লম্ব দিক যদি flex-directionহয় row, এবং অনুভূমিক যদি flex-directionহয় columnপজিশনিং) একাধিক একে অপরের আত্মীয় লাইন।

(অনুচ্ছেদের রেখাগুলি উল্লম্বভাবে ছড়িয়ে থাকা, শীর্ষের দিকে সজ্জিত, নীচের দিকে স্ট্যাক করা This এটি একটি flex-directionসারির দৃষ্টান্তের নিচে রয়েছে)।

সারিবদ্ধ আইটেম

align-items ফ্লেক্স উপাদানগুলির একটি পৃথক রেখার ক্রস অক্ষটি নিয়ন্ত্রণ করে।

(চিন্তা করুন যে কোনও অনুচ্ছেদের স্বতন্ত্র রেখা কীভাবে প্রান্তিক করা হয়েছে, যদি এতে কিছু সাধারণ পাঠ এবং কিছু লম্বা পাঠ্য থাকে যেমন গণিতের সমীকরণ। সেক্ষেত্রে, এটি কি প্রতিটি লাইনের নীচের অংশে, শীর্ষে বা কেন্দ্রের একটি লাইনে থাকবে) সারিবদ্ধ হতে হবে?)

Answer 7

প্রতিটি উত্তর থেকে এবং ব্লগটি দেখার জন্য যা শিখেছি তা হ'ল

ক্রস অক্ষ এবং প্রধান অক্ষ কি

• প্রধান অক্ষটি অনুভূমিক সারি এবং ক্রস অক্ষটি উল্লম্ব কলাম - এর জন্য flex-direction: row
• প্রধান অক্ষটি উল্লম্ব কলাম এবং ক্রস অক্ষটি অনুভূমিক সারি - জন্য flex-direction: column

এখন কনটেন্ট এবং প্রান্তিককরণ-আইটেমগুলি সারিবদ্ধ করুন

প্রান্তিককরণ সামগ্রীটি সারিটির জন্য থাকে, কনটেইনারটিতে (একাধিক সারির চেয়ে বেশি) প্রান্তিককরণ-সামগ্রীর বৈশিষ্ট্য থাকলে এটি কাজ করে

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

সারিবদ্ধ আইটেমগুলি সারিবদ্ধ আইটেমগুলির জন্য হয় প্রান্তিককরণ-আইটেমগুলির বৈশিষ্ট্য

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

আরও রেফারেন্স জন্য ফ্লেক্স দেখুন

Answer 8

মূল পার্থক্যটি যখন উপাদানগুলির উচ্চতা একই হয় না! তারপরে আপনি দেখতে পাচ্ছেন যে সারিতে কীভাবে, সেগুলি সমস্ত কেন্দ্র \ শেষ। শুরু

Answer 9

আমি এখান থেকে যা বুঝতে পেরেছি তা অনুসারে :

আপনি যখন সারিবদ্ধ-আইটেম ব্যবহার করেন বা ন্যায়সঙ্গত আইটেমটি ব্যবহার করেন, আপনি কলাম অক্ষ বা সারি অক্ষের সাথে যথাক্রমে গ্রিড আইটেমের অভ্যন্তরে সামগ্রীটি সামঞ্জস্য করেন।

তবে: আপনি যদি সারিবদ্ধ-সামগ্রী বা ন্যায়সঙ্গত সামগ্রী ব্যবহার করেন তবে আপনি কলাম অক্ষ বা সারি অক্ষ বরাবর গ্রিডটি অবস্থান নির্ধারণ করছেন। এটি ঘটে যখন আপনার বড় গ্রাউন্ডে গ্রিড থাকে এবং প্রস্থ বা উচ্চতা অবিরাম হয় (px ব্যবহার করে)।