केंद्र और सही flexbox तत्वों को संरेखित करें

Question

मैं बीच में आना 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>

https://jsfiddle.net/z44p7bsx/

Answer 1

इस लेआउट को प्राप्त करने के लिए नीचे पांच विकल्प दिए गए हैं:

• सीएसएस पोजिशनिंग
• अदृश्य डोम तत्व के साथ फ्लेक्सबॉक्स
• अदृश्य छद्म तत्व के साथ फ्लेक्सबॉक्स
• फ्लेक्सबॉक्स के साथ flex: 1
• सीएसएस ग्रिड लेआउट

---

विधि # 1: सीएसएस पोजिशनिंग गुण

position: relativeफ्लेक्स कंटेनर पर लागू करें ।

position: absoluteआइटम डी पर लागू करें ।

अब यह आइटम फ्लेक्स कंटेनर के भीतर बिल्कुल स्थित है।

अधिक विशेष रूप से, आइटम डी को दस्तावेज़ प्रवाह से हटा दिया जाता है, लेकिन निकटतम तैनात पूर्वज की सीमा के भीतर रहता है ।

CSS ऑफसेट गुणों का उपयोग करें topऔर rightइस तत्व को स्थिति में ले जाने के लिए।

li:last-child {
  position: absolute;
  top: 0;
  right: 0;
  background: #ddd;
}
ul {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p {
  text-align: center;
  margin-top: 0;
}
span {
  background-color: aqua;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

इस विधि के लिए एक चेतावनी यह है कि कुछ ब्राउज़र सामान्य प्रवाह से पूरी तरह से तैनात फ्लेक्स आइटम को पूरी तरह से हटा नहीं सकते हैं। यह गैर-मानक, अप्रत्याशित तरीके से संरेखण को बदलता है। अधिक विवरण: IE11 में सामान्य प्रवाह से बिल्कुल तैनात फ्लेक्स आइटम को हटाया नहीं जाता है

---

विधि # 2: फ्लेक्स ऑटो मार्जिन और अदृश्य फ्लेक्स आइटम (DOM तत्व)

मार्जिन के संयोजन के साथauto और एक नए, अदृश्य फ्लेक्स आइटम के लेआउट को प्राप्त किया जा सकता है।

नया फ्लेक्स आइटम आइटम डी के समान है और इसे विपरीत छोर (बाएं किनारे) पर रखा गया है।

अधिक विशेष रूप से, क्योंकि फ्लेक्स संरेखण मुक्त स्थान के वितरण पर आधारित है, नई वस्तु तीन मध्य बक्से को क्षैतिज रूप से केंद्रित रखने के लिए एक आवश्यक असंतुलन है। नया आइटम मौजूदा डी आइटम के समान चौड़ाई होना चाहिए, या मध्य बक्से ठीक से केंद्रित नहीं होंगे।

नए आइटम को देखने से हटा दिया जाता है visibility: hidden।

संक्षेप में:

• Dतत्व का डुप्लिकेट बनाएं ।
• इसे सूची की शुरुआत में रखें।
• उपयोग फ्लेक्स autoमार्जिन रखने के लिए A, Bऔर Cकेंद्रित है, दोनों के साथ Dतत्वों दोनों सिरों से बराबर संतुलन बनाने।
• visibility: hiddenडुप्लिकेट पर लागू करेंD

li:first-child {
  margin-right: auto;
  visibility: hidden;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
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;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>D</li><!-- new; invisible spacer item -->
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

विधि # 3: फ्लेक्स ऑटो मार्जिन और अदृश्य फ्लेक्स आइटम (छद्म तत्व)

यह विधि # 2 के समान है, सिवाय इसके कि यह शब्दार्थिक रूप से क्लीनर है और इसकी चौड़ाई Dज्ञात होनी चाहिए।

• के रूप में एक ही चौड़ाई के साथ एक छद्म तत्व बनाएँ D।
• इसे कंटेनर की शुरुआत में रखें ::before।
• autoरखने के लिए फ्लेक्स मार्जिन का उपयोग करें A, Bऔर Cपूरी तरह से केन्द्रित, छद्म और Dतत्वों दोनों सिरों से समान संतुलन बनाने के लिए।

ul::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
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;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

विधि # 4: जोड़ें flex: 1 बाएँ और दाएँ आइटम में

समान संतुलन बनाए रखने के लिए बाएँ और दाएँ आइटम के लिए समान चौड़ाई के बारे में चिंता करने के बजाय, विधि # 2 या # 3 से शुरू करना, बस एक-दूसरे को देना flex: 1 । यह उन दोनों को उपलब्ध स्थान का उपभोग करने के लिए मजबूर करेगा, इस प्रकार मध्य वस्तु को केंद्रित करना।

फिर आप display: flexउनकी सामग्री को संरेखित करने के लिए अलग-अलग मदों में जोड़ सकते हैं ।

इस पद्धति का उपयोग करने के बारे में min-heightध्यान दें : वर्तमान में क्रोम, फ़ायरफ़ॉक्स, एज और संभवतः अन्य ब्राउज़रों में, शॉर्टहैंड नियम इसके लिएflex: 1टूट जाता है:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0%

यही कारण है कि प्रतिशत इकाई (%) पर flex-basisकारणों इस विधि जब तोड़ने के लिए min-heightकंटेनर पर प्रयोग किया जाता है। ऐसा इसलिए है, क्योंकि एक सामान्य नियम के रूप में, बच्चों पर प्रतिशत ऊंचाइयों को स्पष्ट रूप से देखने की आवश्यकता होती हैheight लिए माता-पिता को संपत्ति की ।

यह एक पुराना CSS नियम है जो 1998 ( CSS लेवल 2 ) के पीछे है जो अभी भी कई ब्राउज़रों में कुछ हद तक या किसी अन्य के प्रभाव में है। पूर्ण विवरण के लिए यहां और यहां देखें ।

यहाँ उपयोगकर्ता 2651804 द्वारा टिप्पणियों में पोस्ट की गई समस्या का एक चित्रण है :

#flex-container {
  display: flex;
  flex-direction: column;
  background: teal;
  width: 150px;
  min-height: 80vh;
  justify-content: space-between;
}

#flex-container>div {
  background: orange;
  margin: 5px;
}

#flex-container>div:first-child {
  flex: 1;
}

#flex-container::after {
  content: "";
  flex: 1;
}

<div id="flex-container">
  <div>very long annoying text that will add on top of the height of its parent</div>
  <div>center</div>
</div>

इसका समाधान प्रतिशत इकाई का उपयोग नहीं करना है। कोशिश करो pxया बस कुछ भी नहीं ( जो वास्तव में कल्पना की सिफारिश करता है , इस तथ्य के बावजूद कि कम से कम कुछ प्रमुख ब्राउज़रों ने किसी भी कारण से प्रतिशत इकाई को जोड़ दिया है)।

#flex-container {
  display: flex;
  flex-direction: column;
  background: teal;
  width: 150px;
  min-height: 80vh;
  justify-content: space-between;
}

#flex-container > div {
  background: orange;
  margin: 5px;
}


/* OVERRIDE THE BROWSER SETTING IN THE FLEX PROPERTY */

#flex-container > div:first-child {
  flex: 1;
  flex-basis: 0;
}

#flex-container::after {
  content: "";
  flex: 1;
  flex-basis: 0;
}


/* OR... JUST SET THE LONG-HAND PROPERTIES INDIVIDUALLY

#flex-container > div:first-child {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#flex-container::after {
  content: "";
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
 */

<div id="flex-container">
  <div>very long annoying text that will add on top of the height of its parent</div>
  <div>center</div>
</div>

---

विधि # 5: CSS ग्रिड लेआउट

यह सबसे साफ और सबसे कुशल तरीका हो सकता है। पूर्ण स्थिति, नकली तत्वों या अन्य हैकरी की कोई आवश्यकता नहीं है।

बस कई कॉलम के साथ एक ग्रिड बनाएं। फिर अपने आइटम को मध्य और अंत कॉलम में रखें। मूल रूप से, बस पहला कॉलम खाली छोड़ दें।

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>

Comments

बहुत अच्छा, स्पष्टीकरण के लिए धन्यवाद! मुझे लगता है कि नए जोड़े गए कोड स्निपेट उदाहरण पाठ को छोटा करने से लाभान्वित होंगे क्योंकि यह वास्तव में आउटपुट से स्पष्ट नहीं होता है कि सामग्री छोटे केंद्र के कारण केंद्रित है / केंद्रित नहीं है। केवल मैं?

— user2651804

"नया आइटम मौजूदा डी आइटम के समान चौड़ाई होना चाहिए, या मध्य बॉक्स ठीक से केंद्रित नहीं होगा।" - कि बेकार है कि यह एक ही चौड़ाई होना चाहिए, लेकिन भगवान सीएसएस ग्रिड के लिए धन्यवाद :)

— Vucko

ग्रिड तकनीक का उपयोग करके, आइटम मृत केंद्र में नहीं हैं, तो क्या केंद्र में मृत होने के लिए लोगो तत्व प्राप्त करने का एक तरीका है? imgur.com/a/SVg9xsj

— J86

ग्रिड समाधान से पर्याप्त परिचित नहीं है, हालांकि यह एक आकर्षण की तरह काम करता है और सबसे साफ है। एक प्रश्न मेरे पास है कि तीनों के बराबर नहीं मध्य स्तंभ को अधिक स्थान कैसे दिया जाए?

— सबा आहंग

Answer 2

सबसे आसान तरीका है

.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>

Answer 3

यदि आप इसे संरेखित करना चाहते हैं, तो आप बस एक खाली अवधि संलग्न कर सकते हैं और तीन बच्चों के स्पैन को उनमें विभाजित कर सकते हैं।

Comments

क्या आप अपने कथन का बैक-अप करने के लिए एक छोटा डेमो प्रदान कर सकते हैं?

— क्लेविस

Answer 4

सबसे सरल समाधान माता-पिता कंटेनर को सामग्री केंद्र को औचित्य देना और पहले और अंतिम बच्चे तत्व को मार्जिन-बाएं ऑटो देना होगा।

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>

Answer 5

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>

Answer 6

बहुत स्पष्ट प्रश्न। मैं मदद नहीं कर सका, लेकिन खुदाई के कुछ घंटों के बाद उत्तर पोस्ट कर सकता हूं। हम इसे टेबल, टेबल-सेल, निरपेक्ष पदों, रूपांतरों के साथ हल कर सकते हैं, लेकिन हमें इसे फ्लेक्सबॉक्स के साथ करना था :)

.parent {
  display: flex;
  justify-content: flex-end;
}

.center {
  margin: auto;
}

http://codepen.io/rgfx/pen/BLorgd

Comments

यह वास्तव में मध्य वस्तुओं को केंद्र में नहीं रखता है क्योंकि यह केवल शेष स्थान में कारक है, संपूर्ण स्थान नहीं है। codepen.io/anon/pen/QKGrRk

— माइकल बेंजामिन

@Michael_B, आपके अधिकार ने यह नहीं देखा कि, मेरा बुरा। निरपेक्ष पदों का उपयोग करने के लिए :( हो सकता है कि आपके उच्च प्रतिनिधि के साथ आपको एक इनाम निर्धारित करना चाहिए यह अच्छे के लिए हल हो जाता है। मैं चाहता हूं, लेकिन मेरे पास बहुत कम प्रतिनिधि होंगे, यहां तक ​​कि अब आपकी मदद करने की कोशिश कर रहा है।

— rgfx

माइकल बॉबी द्वारा फ्लेक्सबॉक्स मॉडल में कोई नया व्यवहार नहीं जोड़ा जा रहा है, इसका जवाब दिया जाना उतना ही अच्छा है जितना कि ... आज।

— असोन

Answer 7

मैंने माइकल के उत्तर पर विस्तार किया

.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>

यहाँ एक कोडपेन के रूप में SASS की मदद से

Answer 8

से प्रेरित होकर विधि # 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>

पुनश्च: यकीन नहीं अगर फ्लेक्स और ग्रिड इस तरह से मिश्रण एक अच्छा विचार है!

Comments

आप ग्रिड और फ्लेक्स मिश्रण नहीं कर रहे हैं, justifty-सामग्री एक सीएसएस ग्रिड संपत्ति और flexbox संपत्ति (align-स्वयं के लिए एक ही) है

— Temani Afif

Answer 9

स्वीकृत उत्तर को थोड़ा बदला जा सकता है क्योंकि आप ग्रिड टेम्पलेट क्षेत्रों का उपयोग कर सकते हैं और नकली तत्व के बिना कर सकते हैं

grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr

Answer 10

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>