আমি চাই A Bএবং Cমাঝখানে প্রান্তিককরণ চাই
আমি কীভাবে Dপুরোপুরি ডানদিকে যেতে পারি ?
আগে:
পরে:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>উত্তর:
নীচে এই বিন্যাসটি অর্জনের জন্য পাঁচটি বিকল্প রয়েছে:
flex: 1position: relativeফ্লেক্স পাত্রে প্রয়োগ করুন ।
position: absoluteআইটেম ডি প্রয়োগ করুন।
এখন এই আইটেমটি একেবারে ফ্লেক্স ধারক মধ্যে অবস্থিত।
আরও সুনির্দিষ্টভাবে, আইটেম ডি নথির প্রবাহ থেকে সরানো হয়েছে তবে নিকটস্থ অবস্থান পূর্বসূরীর সীমানায় থাকে ।
সিএসএস অফসেট বৈশিষ্ট্যগুলি ব্যবহার করুন topএবং rightএই উপাদানটিকে অবস্থানে সরাতে।
এই পদ্ধতির একটি সতর্কতা হ'ল কিছু ব্রাউজারগুলি সম্পূর্ণরূপে স্বাভাবিক প্রবাহ থেকে একেবারে অবস্থানযুক্ত ফ্লেক্স আইটেমটি সরিয়ে ফেলতে পারে না। এটি অ-মানক, অপ্রত্যাশিত উপায়ে প্রান্তিককরণ পরিবর্তন করে। আরও বিশদ: একেবারে অবস্থানযুক্ত ফ্লেক্স আইটেমটি আইই 11 এর স্বাভাবিক প্রবাহ থেকে সরানো হয় না
autoমার্জিনের সংমিশ্রণ এবং একটি নতুন, অদৃশ্য ফ্লেক্স আইটেমের সাথে লেআউটটি অর্জন করা যায়।
নতুন ফ্লেক্স আইটেমটি আইটেম ডি-এর সমান এবং বিপরীত প্রান্তে (বাম প্রান্তে) স্থাপন করা হয়েছে।
আরও সুনির্দিষ্টভাবে, যেহেতু ফ্লেক্স প্রান্তিককরণটি মুক্ত স্থানের বিতরণের উপর ভিত্তি করে, নতুন আইটেমটি তিনটি মাঝারি বাক্সকে অনুভূমিকভাবে কেন্দ্রীভূত রাখার জন্য প্রয়োজনীয় প্রতিবিম্ব। নতুন আইটেমটি অবশ্যই বিদ্যমান ডি আইটেমের সমান প্রস্থ হতে হবে, বা মাঝের বাক্সগুলি অবশ্যই কেন্দ্রিক হবে না।
নতুন আইটেমটি সাথে দেখা থেকে সরানো হয়েছে visibility: hidden।
সংক্ষেপে:
Dউপাদানটির সদৃশ তৈরি করুন ।autoরাখতে ফ্লেক্স মার্জিন ব্যবহার করুন ।ABCDvisibility: hiddenসদৃশ প্রয়োগ করুনDএই পদ্ধতিটি # 2 এর সমান, এটি নির্বিশেষে ক্লিনার এবং প্রস্থটি Dঅবশ্যই জানা উচিত be
D।::before।autoরাখতে ফ্লেক্স মার্জিন ব্যবহার করুন ।ABCDflex: 1বাম এবং ডান আইটেমগুলিতে যুক্ত করুনউপরের পদ্ধতি # 2 বা # 3 দিয়ে শুরু করে সমান ভারসাম্য বজায় রাখার জন্য বাম এবং ডান আইটেমগুলির জন্য সমান প্রস্থের বিষয়ে চিন্তা করার পরিবর্তে কেবল একটিকে দিন flex: 1। এটি তাদের উভয়কে উপলব্ধ স্থান গ্রহণ করতে বাধ্য করবে, এইভাবে মধ্যবর্তী আইটেমটিকে কেন্দ্র করে।
তারপরে display: flexআপনি পৃথক আইটেমগুলিতে তাদের সামগ্রীর সারিবদ্ধ করার জন্য যুক্ত করতে পারেন ।
এই পদ্ধতিটি এর সাথে ব্যবহার সম্পর্কে min-heightদ্রষ্টব্য : বর্তমানে ক্রোম, ফায়ারফক্স, এজ এবং সম্ভবত অন্যান্য ব্রাউজারগুলিতে শর্টহ্যান্ড নিয়মটি এতেflex: 1বিভক্ত হয়:
flex-grow: 1flex-shrink: 1flex-basis: 0%যে শতাংশ ইউনিট (%) উপর flex-basisকারণ এই পদ্ধতি যখন বিরতি min-heightধারক উপর ব্যবহার করা হয়। এটি কারণ, একটি সাধারণ নিয়ম হিসাবে, বাচ্চাদের শতাংশের উচ্চতা heightপিতামাতার উপর একটি সুস্পষ্ট সম্পত্তি সেটিং প্রয়োজন ।
এটি 1998 এর পুরানো সিএসএস নিয়ম ( সিএসএস স্তর 2 ) যা এখনও অনেক ব্রাউজারে কিছুটা ডিগ্রি বা অন্য কোনও ক্ষেত্রে কার্যকর হয় effect সম্পূর্ণ বিশদ জন্য দেখুন এখানে এবং এখানে দেখুন ।
এখানে ব্যবহারকারীর দ্বারা মন্তব্যগুলিতে পোস্ট করা সমস্যার চিত্রণ 2651804 :
সমাধানটি হ'ল শতাংশ ইউনিট ব্যবহার না করা। চেষ্টা করুন pxবা ঠিক কিছুই নয় ( কমপক্ষে কয়েকটি প্রধান ব্রাউজার যে কোনও কারণেই শতাংশের একক সংযুক্ত করেছে এমন সত্ত্বেও, যা অনুমানটি আসলে এটিই সুপারিশ করে )।
এটি সবচেয়ে পরিষ্কার এবং সবচেয়ে কার্যকর পদ্ধতি হতে পারে। পরম পজিশনিং, জাল উপাদান বা অন্যান্য হ্যাকারি দরকার নেই।
কেবল একাধিক কলাম সহ গ্রিড তৈরি করুন। তারপরে আপনার আইটেমগুলি মাঝের এবং শেষ কলামগুলিতে রাখুন। মূলত, কেবল প্রথম কলামটি খালি রাখুন।
ul {
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
}
li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }
/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p { text-align: center; }<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>| true center |</span></p>সর্বাধিক সহজ উপায়
.box{
display:flex;
justify-content:center;
}
.item1{
flex:1;
display: flex;
justify-content: center;
transform: translateX(10px);/*D element Width[if needed]*/
} <div class="box">
<div class="item1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="item2">D</div>
</div>আপনি যদি এটি সারিবদ্ধ করতে চান তবে আপনি খালি স্প্যানটি সংযুক্ত করে তিনটি শিশু স্প্যানগুলিকে এগুলিতে ভাগ করতে পারেন।
সবচেয়ে সহজ সমাধান হ'ল পিতামাত্ত পাত্রে কনটেন্ট কেন্দ্রের ন্যায্যতা এবং প্রথম এবং শেষ শিশু উপাদানকে মার্জিন-বাম অটো দেওয়া giving
ul {
display:flex;
justify-content:center;
}
.a,.d {
margin-left:auto;
}<ul>
<li class="a">A</li>
<li>B</li>
<li>C</li>
<li class="d">D</li>
</ul>display:gridপদ্ধতির ব্যবহার করে , আপনি কেবলমাত্র সমস্ত ulবাচ্চাকে একই কক্ষে স্থাপন করতে পারেন এবং তারপরে সেট করতে পারেন justify-self:
ul {
display: grid;
}
ul > * {
grid-column-start: 1;
grid-row-start: 1;
justify-self:center;
}
ul > *:last-child {
justify-self: right;
}
/* Make Fancy */
li {
display:inline-block;
margin: 1px;
padding: 5px;
background: #bbb;
}<ul>
<span>
<li>A</li>
<li>B</li>
<li>C</li>
</span>
<li>D</li>
</ul>খুব পরিষ্কার প্রশ্ন। আমি কয়েক ঘন্টা খোঁড়াখুঁড়ি করার পরে উত্তর পোস্ট করতে পারি না। আমরা টেবিল, টেবিল-সেল, পরম অবস্থান, রূপান্তরগুলি দিয়ে এটি সমাধান করতে পারি তবে আমাদের কেবল এটি ফ্লেক্সবক্সের সাহায্যে করতে হয়েছিল :)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}আমি প্রসারিত Michael_B এর উত্তর
.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) {
flex: 1;
}
.center-flex__2-of-3 > :nth-child(1) {
justify-content: flex-start;
}
.center-flex__2-of-3 > :nth-child(3) {
justify-content: flex-end;
}
.center-flex__1-of-2 > :nth-child(1) {
margin: auto;
}
.center-flex__1-of-2 > :nth-child(2) {
flex: 1;
justify-content: flex-end;
}
.center-flex__2-of-2 > :nth-child(1) {
flex: 1;
justify-content: flex-start;
}
.center-flex__2-of-2 > :nth-child(2) {
margin: auto;
}
.center-flex__1-of-2:before, .center-flex__1-of-1:before {
content: '';
flex: 1;
}
.center-flex__1-of-1:after, .center-flex__2-of-2:after {
content: '';
flex: 1;
}
[class*=center-flex] {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border: 10px solid rgba(0, 0, 0, 0.1);
}
[class*=center-flex] > * {
display: flex;
}
li {
padding: 3px 5px;
}2 of 3
<ul class="center-flex__2-of-3">
<span>
<li>Accusamus</li>
<li>Porro</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
1 of 2
<ul class="akex center-flex__1-of-2">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
2 of 2
<ul class="akex center-flex__2-of-2">
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>
<br><br>
1 of 1
<ul class="center-flex__1-of-1">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>দ্বারা অনুপ্রাণিত পদ্ধতি # 5: সিএসএস গ্রিড লেআউট এর @Michal বেঞ্জামিন এর সমাধান এবং কারণ আমি Tailwind ব্যবহার করছি এবং এখন হিসাবে এখনও ডিফল্ট ভাবে সব গ্রিড বিকল্পে অ্যাক্সেস করতে পারে না। এটি কাজ করে বলে মনে হচ্ছে:
ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
li:nth-child(1) { justify-content: flex-start; } // OR: margin-right: auto
li:nth-child(3) { justify-content: flex-end; } // OR: margin-left:auto
li: {align-self: center;}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>পিএস: নিশ্চিত নন যে এর মতো ফ্লেক্স এবং গ্রিড মিশ্রন করা ভাল ধারণা!
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
position:absolute;
right:10px;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>