order বৈশিষ্ট্য
order বৈশিষ্ট্যটি ফ্লেক্স-কন্টেইনারের মধ্যে
পৃথক flex-ব্লকের ক্রম নির্ধারণ করে।
এটি একটি নির্দিষ্ট ফ্লেক্স ব্লকে প্রয়োগ করা হয়।
এই বৈশিষ্ট্যটি একটি ধনাত্মক বা ঋণাত্মক পূর্ণসংখ্যা মান হিসেবে গ্রহণ করে। সংখ্যাটি যত ছোট হবে, উপাদানটি অন্যান্য উপাদানের তুলনায় HTML কোডে এর অবস্থান নির্বিশেষে তত আগে দাঁড়াবে।
সিনট্যাক্স
সিলেক্টর {
order: ধনাত্মক বা ঋণাত্মক সংখ্যা;
}
উদাহরণ
এই উদাহরণে, সমস্ত ব্লককে order ব্যবহার করে তাদের
অবস্থানের ক্রম নির্ধারণ করা হয়েছে। সবচেয়ে প্রথমে থাকবে
ঋণাত্মক order -1 সহ ব্লকটি,
তারপর order 1 সহ ব্লকটি এবং এরপর ক্রমবর্ধমানভাবে:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
<div id="elem6">6</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
}
#parent > div {
border: 1px solid #696989;
min-width: 100px;
}
#elem1 {
order: 4;
}
#elem2 {
order: 5;
}
#elem3 {
order: 3;
}
#elem4 {
order: 2;
}
#elem5 {
order: 1;
}
#elem6 {
order: -1;
}
:
আরও দেখুন
-
flex-directionবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির অক্ষের দিক নির্ধারণ করে -
justify-contentবৈশিষ্ট্য,
যা প্রধান অক্ষ বরাবর সমীকরণ নির্ধারণ করে -
align-itemsবৈশিষ্ট্য,
যা ক্রস অক্ষ বরাবর সমীকরণ নির্ধারণ করে -
flex-wrapবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির মাল্টিলাইন ক্ষমতা নির্ধারণ করে -
flex-flowবৈশিষ্ট্য,
flex-direction এবং flex-wrap এর জন্য সংক্ষেপণ -
align-selfবৈশিষ্ট্য,
যা একটি ব্লকের সমীকরণ নির্ধারণ করে -
flex-basisবৈশিষ্ট্য,
যা একটি নির্দিষ্ট ফ্লেক্স ব্লকের আকার নির্ধারণ করে -
flex-growবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির "লোভ" নির্ধারণ করে -
flex-shrinkবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির সংকোচন ক্ষমতা নির্ধারণ করে -
flexবৈশিষ্ট্য,
flex-grow, flex-shrink এবং flex-basis এর জন্য সংক্ষেপণ
