CSS एक आइटम को flexbox के साथ संरेखित करता है

Question

https://jsfiddle.net/vhem8scs/

क्या दो आइटमों को बाईं ओर संरेखित करना और एक आइटम को फ्लेक्सबॉक्स के साथ दाएं संरेखित करना संभव है? लिंक इसे और अधिक स्पष्ट रूप से दिखाता है। आखिरी उदाहरण वह है जो मैं हासिल करना चाहता हूं।

Flexbox में मेरे पास कोड का एक ब्लॉक है। फ्लोट के साथ मेरे पास कोड के चार ब्लॉक हैं। यही कारण है कि मैं flexbox पसंद करते हैं।

एचटीएमएल

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

सीएसएस

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

Comments

stackoverflow.com/a/33856609/3597276

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

Answer 1

एक फ्लेक्स बच्चे को दाईं ओर संरेखित करने के लिए इसके साथ सेट करेंmargin-left: auto;

से फ्लेक्स कल्पना :

मुख्य अक्ष में ऑटो मार्जिन का एक उपयोग फ्लेक्स आइटम को अलग-अलग "समूहों" में अलग करना है। निम्नलिखित उदाहरण से पता चलता है कि एक सामान्य यूआई पैटर्न को पुन: पेश करने के लिए इसका उपयोग कैसे किया जाता है - बाईं ओर संरेखित और दूसरों को दाईं ओर संरेखित कार्यों के साथ एकल बार।

.wrap div:last-child {
  margin-left: auto;
}

अपडेटेड फ़िडेल

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

ध्यान दें:

आप फ्लेक्स-ग्रो: 1 को मध्य फ्लेक्स आइटम (या शॉर्टहैंड flex:1) पर सेट करके एक समान प्रभाव प्राप्त कर सकते हैं जो अंतिम आइटम को दाईं ओर धकेल देगा। ( डेमो )

हालांकि स्पष्ट अंतर यह है कि मध्य आइटम जितना बड़ा हो सकता है, उससे अधिक हो सकता है। अंतर देखने के लिए फ्लेक्स आइटम में एक बॉर्डर जोड़ें।

डेमो

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Comments

धन्यवाद! मैंने एक और चीज़ की कोशिश की जो मैंने इसे पढ़ने से पहले काम की थी। यह फ्लेक्स-ग्रो सेट करना था: 1 उस तत्व पर जो दूसरे को धक्का देना चाहिए। यह काम भी किया। क्या आप जानते हैं कि उनमें से कौन बेहतर है और क्यों?

— जेन्स टॉर्नेल 15

बहुत बढ़िया जवाब। इसलिए मार्जिन कोई अतिरिक्त स्थान नहीं लेता है, और फ्लेक्स: 1 करता है। ठंडा!

— 15

@ JensTörnell, autoमार्जिन फ्लेक्स आइटम को अलग करने के लिए कंटेनर में खाली जगह का उपयोग करता है। flex-grow/ flexसंपत्ति, कि खाली जगह लेता है यह फ्लेक्स आइटम है, जो कि राशि से फैलता करने के लिए देता है। जैसा कि Danield ने उल्लेख किया है, बाद वाली विधि फ्लेक्स आइटम TWO को बड़ा बनाती है, जिसे आप नहीं चाहते हैं।

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

सभी हीरोज टोपी नहीं पहनते हैं।

— टॉम

@ user1063287 कई तत्वों को दाईं ओर संरेखित करने के लिए बस मार्जिन-लेफ्ट लागू करें: पहले तत्व पर ऑटो, जिसे दाएं संरेखित करने की आवश्यकता है। तो div:nth-last-child(4) { margin-left: auto } मान

— Danield

Answer 2

एक कविता के लिए, शुद्ध फ्लेक्सबॉक्स विकल्प, बाएं-संरेखित आइटम और दाएं-संरेखित आइटम समूह:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

और उपयोग करें space-between:

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

इस तरह आप कई वस्तुओं को दाईं ओर (या सिर्फ एक) समूह कर सकते हैं।

https://jsfiddle.net/c9mkewwv/3/

Comments

यह काम करता है, लेकिन यदि आप प्रत्येक समूह के अंदर के तत्वों को नहीं बदलते हैं display: inline;या display: inline-block;फिर, वे फ्लेक्सबॉक्स की तरह एक पंक्ति में सभी के बजाय ढेर हो जाते हैं अन्यथा नहीं होगा।

— DIMM रीपर

@ TheDIMMR सस्ता मुझे यकीन नहीं है कि मुझे समस्या दिखाई दे रही है। क्या आप विस्तार कर सकते हैं?

— 17

मेरा तात्पर्य यह है कि आपने टैग को तुरंत रैपिंग से Oneऔर एस Twoसे divएस में कैसे बदल दिया span- यदि वे अभी भी थे display: block;तो वे अलग-अलग लाइनों में प्रवाहित होंगे। चूंकि ओपी मूल रूप से था div, मैं सिर्फ यह बताना चाहता था कि divमूल टैग के प्रदर्शन को बदलने के बिना बस उन्हें दूसरे के अंदर डालने से काम नहीं चलेगा।

— DIMM रीपर

हां, चूंकि तत्व अब एक स्तर से नीचे हैं, display: flexअब उनके लेआउट को प्रभावित नहीं कर रहा है। यदि आप div का उपयोग करना चाहते हैं, तो हाँ, inlineया inline-blockकाम करेगा। लेकिन यह भी, जाहिर है, flexक्योंकि हम इसे flex-direction: rowपहले से ही पैरेंट डिव के साथ डिफ़ॉल्ट के लिए उपयोग कर रहे हैं । पूर्व। jsfiddle.net/ynbb5964/2

— spflow

धन्यवाद, मैंने संरेखित-स्व: फ्लेक्स-एंड की कोशिश की, लेकिन यह काम क्यों नहीं करता है?

— आनंद

Answer 3

केंद्र में कुछ तत्वों (शीर्ष लेख) और अंतिम तत्व को दाईं ओर (शीर्ष लेख) में संरेखित करने के लिए।

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}