পার্শ্ব আইটেমগুলির বিভিন্ন প্রস্থ থাকাকালীন মাঝারি আইটেমটি কেন্দ্রিক রাখুন

161

নিম্নলিখিত বিন্যাসটি কল্পনা করুন, যেখানে বিন্দুগুলি বাক্সগুলির মধ্যে স্থানকে উপস্থাপন করে:

[Left box]......[Center box]......[Right box]

আমি যখন ডান বাক্সটি সরিয়ে ফেলি, তখন আমি পছন্দ করি যে সেন্টার বক্সটি এখনও কেন্দ্রে থাকবে, যেমন:

[Left box]......[Center box].................

আমি যদি বাম বাক্সটি সরিয়ে ফেলতে পারি তবে একই বিষয়।

................[Center box].................

এখন যখন কেন্দ্রের বাক্সের মধ্যে থাকা সামগ্রীটি দীর্ঘতর হয়ে যায়, এটি কেন্দ্রীভূত থাকা অবস্থায় প্রয়োজনীয় প্রয়োজনীয় স্থান গ্রহণ করবে। বাম এবং ডান বাক্সটি কখনই সঙ্কুচিত হবে না এবং এভাবে যখন কোনও স্থান ছেড়ে যায় না overflow:hiddenএবং text-overflow: ellipsisসামগ্রীটি ভেঙে কার্যকর হয়;

[Left box][Center boxxxxxxxxxxxxx][Right box]

উপরের সমস্তটি আমার আদর্শ পরিস্থিতি, তবে এই প্রভাবটি কীভাবে সম্পাদন করা যায় তা সম্পর্কে আমার কোনও ধারণা নেই। কারণ আমি যখন এর মতো একটি ফ্লেক্স স্ট্রাকচার তৈরি করি তখন:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

যদি বাম এবং ডান বাক্সটি হুবহু একই আকারের হয় তবে আমি পছন্দসই প্রভাবটি পাই। তবে দু'জনের মধ্যে যখন একটি পৃথক আকারের হয় তখন কেন্দ্রীভূত বাক্সটি আর কেন্দ্রীভূত হয় না।

কেউ কি আমাকে সাহায্য করতে পারে?

হালনাগাদ

একটি justify-selfসুন্দর হবে, এটি আদর্শ হবে:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

— ছাপ
সূত্র

3

মূলত ... আপনি পারবেন না। যেভাবে flexboxকাজ করার কথা তা নয় । আপনি অন্য পদ্ধতি ব্যবহার করতে পারেন।

— পাওলি_ডি

1

যদি এটি না করে তবে সত্যিই ফ্লেক্সবক্স সম্পূর্ণ করবে। কারণ ফ্লেক্সবক্সটি স্থান বিতরণ এবং আইটেমগুলির মধ্যে কীভাবে আচরণ করে সে সম্পর্কে।

— চিহ্নিত করুন

1

আমরা justify-selfআজ আগে আলোচনা করেছি , সুতরাং আপনি এটি আকর্ষণীয় খুঁজে পেতে পারেন: stackoverflow.com/questions/32551291/…

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

130

যদি বাম এবং ডান বাক্সগুলি হুবহু একই আকারের হয় তবে আমি পছন্দসই প্রভাবটি পাই। তবে দুজনের মধ্যে যখন একটি আলাদা আকারের হয় তখন কেন্দ্রীভূত বাক্সটি আর কেন্দ্রীভূত হয় না। কেউ কি আমাকে সাহায্য করতে পারে?

ভাইবোনদের প্রস্থ নির্বিশেষে মধ্য আইটেমটি কেন্দ্র করে ফ্লেক্সবক্স ব্যবহার করে এখানে একটি পদ্ধতি।

মুখ্য সুবিধা:

খাঁটি সিএসএস
কোন নিখুঁত অবস্থান
কোন জেএস / জিকুয়েরি নেই

নেস্টেড ফ্লেক্স পাত্রে এবং autoমার্জিনগুলি ব্যবহার করুন :

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > span { margin-right: auto; }

.box:last-child  > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}
p {
  text-align: center;
  margin: 5px 0 0 0;
}

<div class="container">
  <div class="box"><span>short text</span></div>
  <div class="box"><span>centered text</span></div>
  <div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>&#8593;<br>true center</p>

স্নিপেট প্রসারিত করুন

এখানে কিভাবে এটা কাজ করে:

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

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

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

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

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

— মাইকেল বেঞ্জামিন
সূত্র

5

এই সমাধানগুলি widthনির্দিষ্ট করার অনুমতি দেয় না

— অ্যালেক্স জি

@ অ্যালেক্সজি, কীভাবে? আপনি একটি উদাহরণ প্রদান করতে পারেন?

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

4

স্থান বিতরণের জন্য নমনীয় উপাদানগুলির প্রস্থকে পরিবর্তন করা সমানভাবে ওপি-র প্রশ্নকে মিস করে। তাদের প্রশ্নের উপাদানগুলির মধ্যে স্থান রয়েছে। প্রাক্তন: "নিম্নলিখিত বিন্যাসটি কল্পনা করুন, যেখানে বিন্দুগুলি বাক্সগুলির মধ্যে স্থানকে উপস্থাপন করে।" 3 সমান আকারের উপাদানগুলিতে পাঠ্য কেন্দ্রিক করা তুচ্ছ।

— লেল্যান্ড

1

আমি দিব্যি আমি এখনই তোমাকে চুমুতে পারি! এটাই আমার দরকার ছিল এবং বের করতে পারিনি।

— ইলিয়টরোজওয়াটার

1

এটি MacOS- শৈলীর উইন্ডো শিরোনামবারগুলি বাস্তবায়নের জন্য আমার যা প্রয়োজন ঠিক তা করেছে। white-space: nowrapঅঞ্চলটি খুব ছোট হয়ে গেলে পাঠ্যটিকে মোড়ানো থেকে আটকাতে ধাঁধাটির শেষ অংশটি যুক্ত করা ছিল Add

— Geo1088

32

পাত্রে তিনটি ফ্লেক্স আইটেম ব্যবহার করুন
flex: 1প্রথম এবং শেষটি সেট করুন । এটি তাদের মধ্যবর্তী স্থানের রেখে যাওয়া উপলভ্য স্থান পূরণ করতে সমানভাবে বৃদ্ধি পায়।
সুতরাং, মাঝেরটি কেন্দ্রিক হতে থাকবে।
তবে, প্রথম বা শেষ আইটেমটিতে যদি বিস্তৃত সামগ্রী থাকে তবে নতুন min-width: autoপ্রাথমিক মানের কারণে সেই ফ্লেক্স আইটেমটিও বৃদ্ধি পাবে ।

দ্রষ্টব্য, Chrome এটিকে সঠিকভাবে প্রয়োগ করবে বলে মনে হয় না। যাইহোক, যদি আপনি নির্ধারণ করতে পারেন min-widthকরতে -webkit-max-contentবা -webkit-min-contentএবং এটি খুব কাজ করবে।
কেবলমাত্র সেই ক্ষেত্রে মধ্যবর্তী উপাদানটিকে কেন্দ্রের বাইরে ধাক্কা দেওয়া হবে।

.outer-wrapper {
  display: flex;
}
.item {
  background: lime;
  margin: 5px;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.right.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 100vw; }
}

<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></div>

স্নিপেট প্রসারিত করুন

— Oriol
সূত্র

ধন্যবাদ, এই উত্তরটি সফলভাবে ওপিএস প্রশ্নের উত্তর দেয়, স্বীকৃত উত্তরের মতো নয়

— ব্লোজি

8

ফ্লেক্সবক্স ব্যবহার করে ডিফল্ট করার পরিবর্তে গ্রিড ব্যবহার করে এটি শীর্ষ স্তরের বাচ্চাদের ভিতরে অতিরিক্ত মার্কআপ ছাড়াই সিএসএসের 2 লাইনে সলভ করে।

এইচটিএমএল:

<header class="header">
  <div class="left">variable content</div>
  <div class="middle">variable content</div>
  <div class="right">variable content which happens to be very long</div>
</header>

সিএসএস:

.header {
  display: grid;
  grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
  /* use either */
  margin: 0 auto;
  /* or */
  text-align: center;
}

ফ্লেক্সবক্স শিলা কিন্তু সবকিছুর উত্তর হওয়া উচিত নয়। এই ক্ষেত্রে গ্রিড পরিষ্কারভাবে পরিষ্কার বিকল্প।

এমনকি আপনার পরীক্ষার আনন্দের জন্য একটি কোডেনও তৈরি করেছেন: https://codepen.io/anon/pen/mooQOV

— জোহান
সূত্র

2

flexসবকিছুর চেয়ে অন্য বিকল্প থাকতে পারে তা স্বীকার করার জন্য +1 1 আমার একটাই আপত্তি হ'ল align-items: centerযদি আপনার আইটেমগুলি বিভিন্ন উচ্চতা হয় এবং প্রান্তিককরণের প্রয়োজন হয় তবে উল্লম্ব প্রান্তিককরণটি ফ্লেক্স ( ) ব্যবহার করে সহজ হয়ে যায়

— ফিলিপ

1

আমি এই সমাধানটি এবং এই সমস্যার জন্য গ্রিড ব্যবহার করার ধারণাটি পছন্দ করি তবে আমি মনে করি আপনার সমাধানটিতে কিছু উল্লেখযোগ্য ত্রুটি রয়েছে। প্রথমত, যদি কোনও বাহ্যিক কোষের বিষয়বস্তু 20% এর চেয়ে বেশি হয় তবে সামগ্রীটি হয় কেন্দ্রের ঘরের মধ্যে মোড়ানো বা উপচে পড়তে চলেছে। দ্বিতীয়ত, কেন্দ্রটি যদি 60০% এর চেয়ে বড় হয় তবে এটি তার সামগ্রী বাক্সের বাইরে বাড়তে চলেছে এবং হয় শেষ কক্ষটি মোড়ানো বা ধাক্কা দেয়। অবশেষে, কেন্দ্রটি বাইরের কক্ষগুলির জন্য স্থান তৈরি করতে স্থান পরিবর্তন করবে না। এটি কেবল তাদের জড়ো / উপচে পড়তে বাধ্য করে। এটি কোনও খারাপ সমাধান নয়, তবে আইএমও এটি "পরিষ্কারভাবে পরিষ্কার বিকল্প" নয় "

— ক্রিস

6

আপনি এটি এর মতো করতে পারেন:

.bar {
    display: flex;    
    background: #B0BEC5;
}
.l {
    width: 50%;
    flex-shrink: 1;
    display: flex;
}
.l-content {
    background: #9C27B0;
}
.m { 
    flex-shrink: 0;
}
.m-content {    
    text-align: center;
    background: #2196F3;
}
.r {
    width: 50%;
    flex-shrink: 1;
    display: flex;
    flex-direction: row-reverse;
}
.r-content { 
    background: #E91E63;
}

<div class="bar">
    <div class="l">
        <div class="l-content">This is really long content.  More content.  So much content.</div>
    </div>
    <div class="m">
        <div class="m-content">This will always be in the center.</div>
    </div>
    <div class="r">
        <div class="r-content">This is short.</div>
    </div>
</div>

স্নিপেট প্রসারিত করুন

— মাইকেল মর্টন
সূত্র

2

এখানে একটি উত্তর যা ফ্লেক্সবক্সের পরিবর্তে গ্রিড ব্যবহার করে। এই সমাধানটিতে গৃহীত উত্তরের মতো এইচটিএমএলটিতে অতিরিক্ত নাতি-নাতনী উপাদানগুলির প্রয়োজন হয় না। এবং এটি সঠিকভাবে কাজ করে এমনকি 2019 এর গ্রিড উত্তরের বিপরীতে একদিকে থাকা সামগ্রীগুলি কেন্দ্রে প্রবাহিত হওয়ার জন্য যথেষ্ট দীর্ঘ হয়ে যায়।

এই সমাধানটি যা করে না তা হ'ল একটি উপবৃত্ত দেখান বা প্রশ্নের বাক্সে বর্ণিত হিসাবে কেন্দ্রের বাক্সে অতিরিক্ত সামগ্রী লুকায়।

section {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

section > *:last-child {
  white-space: nowrap;
  text-align: right;
}

/* not essential; just for demo purposes */
section {
  background-color: #eee;
  font-family: helvetica, arial;
  font-size: 10pt;
  padding: 4px;
}

section > * {
  border: 1px solid #bbb;
  padding: 2px;
}

<section>
  <div>left</div>
  <div>center</div>
  <div>right side is longer</div>
</section>

<section>
  <div>left</div>
  <div>center</div>
  <div>right side is much, much longer</div>
</section>

<section>
  <div>left</div>
  <div>center</div>
  <div>right side is much, much longer, super long in fact</div>
</section>

স্নিপেট প্রসারিত করুন

— ব্রায়ান মোরার্টি
সূত্র

0

মাঝারি উপাদানটির জন্য সঠিক কেন্দ্র বিন্যাসে পৌঁছানোর জন্য আপনি এই সহজ উপায়টিও ব্যবহার করতে পারেন:

.container {
    display: flex;
    justify-content: space-between;
}

.container .sibling {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: gray;
}

.container .sibling:first-child {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.container .sibling:last-child {
    justify-content: flex-end;
    width: 50%;
    box-sizing: border-box;
    padding-left: 100px; /* .center's width divided by 2 */
}

.container .sibling:last-child .content {
    text-align: right;
}

.container .sibling .center {
    height: 100%;
    width: 200px;
    background-color: lightgreen;
    transform: translateX(50%);
}

কোডেপেন: https://codepen.io/ErAz7/pen/mdeBKLG

— এরফান আজারি
সূত্র

0

display: flexবাবা-মা এবং বাচ্চাদের ব্যবহার করে এটি করার আরও একটি উপায় এখানে রয়েছে :

.Layout{
    display: flex;
    justify-content: center;
}
.Left{
    display: flex;
    justify-content: flex-start;
    width: 100%;
}
.Right{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

<div class = 'Layout'>
    <div class = 'Left'>I'm on the left</div>
    <div class = 'Mid'>Centered</div>
    <div class = 'Right'>I'm on the right</div>
</div>

স্নিপেট প্রসারিত করুন

— এরিক মার্টন জর্দোন
সূত্র