উত্তর:
align-items
আনমন-বাক্সের সম্পত্তি ক্রস অক্ষ ঠিক বরাবর একটি আনমন ধারক ভিতরে আইটেম সাজায় justify-content
প্রধান অক্ষ বরাবর আছে। (ডিফল্টর flex-direction: row
জন্য ক্রস অক্ষটি উল্লম্বের সাথে মিলিত হয় এবং মূল অক্ষটি অনুভূমিকের সাথে মিলে যায় flex-direction: column
those এই দুটিটির সাথে যথাক্রমে আন্তঃসংযোগ হয়)।
কীভাবে 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
এখানে একটি দুর্দান্ত শীতল কলম যা আপনাকে ফ্লেক্সবক্সের প্রায় প্রতিটি জিনিস দিয়ে দেখায় এবং খেলতে দেয়।
align-*
বৈশিষ্ট্যগুলি ফ্লেক্স আইটেমগুলি অনুভূমিকভাবে স্থানান্তর করতে পারে। এটা নির্ভর করে flex-direction
। stackoverflow.com/q/32551291/3597276
আমি http://flexboxfroggy.com/ উদাহরণটি খুব দরকারী।
এটি আপনাকে 10-20 মিনিট সময় নেবে এবং 21 স্তরে আপনি আপনার প্রশ্নের উত্তর খুঁজে পাবেন। এটি উল্লেখ করা হয়েছে:
সারিবদ্ধ-সামগ্রী লাইনগুলির মধ্যে ব্যবধান নির্ধারণ করে, যখন সারিবদ্ধ-আইটেমগুলি নির্ধারণ করে যে সামগ্রিকভাবে আইটেমগুলি ধারকটির মধ্যে কীভাবে প্রান্তিক হয়। যখন কেবল একটি লাইন থাকে, সারিবদ্ধ-সামগ্রীটির কোনও প্রভাব থাকে না
প্রথমত, align-items
একক সারিতে থাকা আইটেমগুলির জন্য। সুতরাং মূল অক্ষের একক সারির জন্য , align-items
এই আইটেমগুলি একে অপরের সাথে সম্পর্কিত করে তুলবে এবং এটি পরবর্তী সারি থেকে নতুন দৃষ্টিভঙ্গি দিয়ে শুরু হবে।
এখন, align-content
একটি সারিতে আইটেমগুলিতে হস্তক্ষেপ করে না তবে সারিগুলির সাথেই । সুতরাং, align-content
একে অপরের সাথে সম্মতি এবং ফ্লেক্স পাত্রে সারি সারিবদ্ধ করার চেষ্টা করবে।
এই ফিডলটি দেখুন: https://jsfiddle.net/htym5zkn/8/
আমারও একই বিভ্রান্তি ছিল। উপরের উত্তরগুলির উপর ভিত্তি করে কিছু টিঙ্কিংয়ের পরে, আমি শেষ পর্যন্ত পার্থক্যগুলি দেখতে পাচ্ছি। আমার নম্র মতে, পার্থক্যটি একটি ফ্লেক্স পাত্রে ভালভাবে প্রদর্শিত হয় যা নিম্নলিখিত দুটি শর্ত পূরণ করে:
min-height: 60rem
) এবং এটি এর সামগ্রীর জন্য খুব দীর্ঘ হয়ে যেতে পারেশর্তাদি 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 এর প্রভাবগুলি ধারকটির উপরের প্রান্তের সাথে সম্পর্কিত সামগ্রীর প্রান্তিককরণটি দেখতে শুরু করি ।
এই উদাহরণগুলি ফ্লেক্সবক্সের উপর ভিত্তি করে, তবে একই নীতিগুলি সিএসএস গ্রিডে প্রযোজ্য। আশাকরি এটা সাহায্য করবে :)
ভাল আমি তাদের আমার ব্রাউজারে পরীক্ষা করেছি।
align-content
যখন এটি মূল্য প্রসারিত হয় কলামের জন্য সারি দিক বা প্রস্থের জন্য একটি লাইন উচ্চতা পরিবর্তন করতে পারেন বা মধ্যবর্তী বা লাইন প্রায় খালি জায়গা যোগ space-between
, space-around
, flex-start
, flex-end values
।
align-items
লাইনের ক্ষেত্রের ভিতরে আইটেমের উচ্চতা বা অবস্থান পরিবর্তন করতে পারে। আইটেমগুলি মোড়ানো না হলে তাদের কেবলমাত্র একটি লাইন থাকে যা এর অঞ্চলটি সর্বদা ফ্লেক্স-বক্স অঞ্চলে প্রসারিত থাকে (এমনকি আইটেমগুলি উপচে পড়ে গেলেও) এবং align-content
কোনও একক লাইনে তার কোনও প্রভাব পড়ে না। সুতরাং মোড়ানো না থাকা আইটেমগুলিতে এর কোনও প্রভাব নেই এবং কেবলমাত্র align-items
তারা সমস্ত একক লাইনে থাকলে আইটেমের অবস্থান পরিবর্তন করতে বা প্রসারিত করতে পারে।
তবে এগুলি মোড়ানো থাকলে প্রতিটি লাইনের ভিতরে আপনার একাধিক লাইন এবং আইটেম থাকে have এবং যদি প্রতিটি লাইনের সমস্ত আইটেমের উচ্চতা একই থাকে (সারি দিকের জন্য) যে রেখার উচ্চতা সেই আইটেমগুলির উচ্চতার সমান হবে এবং আপনি align-items
মান পরিবর্তন করে কোনও প্রভাব দেখতে পাবেন না ।
সুতরাং আপনি যদি align-items
আপনার আইটেমগুলি মোড়ানো হয় এবং একই উচ্চতা (সারি দিকের জন্য) থাকে তখন আপনি আইটেমগুলিকে প্রভাবিত করতে চান align-content
তবে লাইনের ক্ষেত্রটি প্রসারিত করতে আপনাকে প্রথমে প্রসারিত মান সহ ব্যবহার করতে হবে ।
সারিবদ্ধ-সামগ্রী
align-content
নিয়ন্ত্রণগুলি ক্রস অক্ষ (অর্থাত উল্লম্ব দিক যদি flex-direction
হয় row
, এবং অনুভূমিক যদি flex-direction
হয় column
পজিশনিং) একাধিক একে অপরের আত্মীয় লাইন।
(অনুচ্ছেদের রেখাগুলি উল্লম্বভাবে ছড়িয়ে থাকা, শীর্ষের দিকে সজ্জিত, নীচের দিকে স্ট্যাক করা This এটি একটি flex-direction
সারির দৃষ্টান্তের নিচে রয়েছে)।
সারিবদ্ধ আইটেম
align-items
ফ্লেক্স উপাদানগুলির একটি পৃথক রেখার ক্রস অক্ষটি নিয়ন্ত্রণ করে।
(চিন্তা করুন যে কোনও অনুচ্ছেদের স্বতন্ত্র রেখা কীভাবে প্রান্তিক করা হয়েছে, যদি এতে কিছু সাধারণ পাঠ এবং কিছু লম্বা পাঠ্য থাকে যেমন গণিতের সমীকরণ। সেক্ষেত্রে, এটি কি প্রতিটি লাইনের নীচের অংশে, শীর্ষে বা কেন্দ্রের একটি লাইনে থাকবে) সারিবদ্ধ হতে হবে?)
প্রতিটি উত্তর থেকে এবং ব্লগটি দেখার জন্য যা শিখেছি তা হ'ল
ক্রস অক্ষ এবং প্রধান অক্ষ কি
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;
}
আরও রেফারেন্স জন্য ফ্লেক্স দেখুন
আমি এখান থেকে যা বুঝতে পেরেছি তা অনুসারে :
আপনি যখন সারিবদ্ধ-আইটেম ব্যবহার করেন বা ন্যায়সঙ্গত আইটেমটি ব্যবহার করেন, আপনি কলাম অক্ষ বা সারি অক্ষের সাথে যথাক্রমে গ্রিড আইটেমের অভ্যন্তরে সামগ্রীটি সামঞ্জস্য করেন।
তবে: আপনি যদি সারিবদ্ধ-সামগ্রী বা ন্যায়সঙ্গত সামগ্রী ব্যবহার করেন তবে আপনি কলাম অক্ষ বা সারি অক্ষ বরাবর গ্রিডটি অবস্থান নির্ধারণ করছেন। এটি ঘটে যখন আপনার বড় গ্রাউন্ডে গ্রিড থাকে এবং প্রস্থ বা উচ্চতা অবিরাম হয় (px ব্যবহার করে)।