फ्लेक्स आइटम को राइट-एलाइन कैसे करें?

Question

उपयोग करने की तुलना में "संपर्क" को दाएं-संरेखित करने के लिए एक अधिक फ्लेक्सबॉक्स-ईश रास्ता है position: absolute?

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

http://jsfiddle.net/vqDK9/

Comments

आप फ्लोट का सही उपयोग कर सकते हैं, लेकिन यह उसी तरह है ...! सबसे अच्छा तरीका है कि टेक्स्ट-एलाइन के साथ डिस्प्ले टेबल का उपयोग करें।

— योहन तिलोती

यकीन है, अगर यह बेहतर है। फिर भी "राइट" को संरेखित करने में समस्या आ रही है, हालांकि: jsfiddle.net/vqDK9/1

— मार्क बोल्डर

मैंने आपकी

— फ़ाइडल

इसे करने के लिए कम से कम दो तरीके हैं: stackoverflow.com/a/33856609/3597276

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

Answer 1

हेयर यू गो। justify-content: space-betweenफ्लेक्स कंटेनर पर सेट करें ।

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

Comments

याjustify-content: flex-end

— बीटी

.C की चौड़ाई को 300px पर सेट करने का प्रयास करें। शीर्षक अब केंद्रित नहीं है। तो हां, यह सवाल का जवाब देता है, लेकिन इससे डिजाइन टूट जाता है।

— अगेम्नसस

ध्यान दें कि यह हमेशा उस तरह से काम नहीं करता है जिसकी आप अपेक्षा कर सकते हैं, जैसे कि एक .c::afterछद्म तत्व है। मेरे अनुभव में, margin-left: auto;जाने का रास्ता है।

— विल

याflex-flow: row-reverse;

— jchook

यदि आप एक फ्लेक्स कंटेनर में सिर्फ एक आइटम संरेखित नहीं करना चाहते हैं तो मुझे यह एक सही उत्तर नहीं लगता।

— फॉक्सहाउंडन

Answer 2

एक अधिक फ्लेक्स दृष्टिकोण एक autoबाएं मार्जिन का उपयोग करने के लिए होगा (फ्लेक्स आइटम ऑटो मार्जिन का इलाज जब ब्लॉक प्रारूपण संदर्भ में उपयोग किया जाता है) की तुलना में थोड़ा अलग होता है।

.c {
    margin-left: auto;
}

अद्यतन की गई फ़िडल:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Comments

धन्यवाद। क्या आप व्यक्तिगत रूप से Yohann Tilotti की प्रदर्शन तालिका विधि के ऊपर इसे पसंद करेंगे? यदि हां, तो क्यों?

— मार्क बोल्डर

@MarkBoulder: अनुकूलता कारणों से उनका तरीका बेहतर है, लेकिन अगर आप पहले से ही फ्लेक्सबॉक्स का उपयोग कर रहे हैं तो मेरा जवाब और अधिक समझ में आता है।

— adrift

@ मर्कबॉल्डर: वे दोनों इस मामले में एक ही बात पूरी करते हैं। लाभ की अन्य प्रॉपर्टी (और व्यवहार) फ्लेक्स आइटम के साथ जुड़े होने किया जाएगा कि तालिका दृष्टिकोण नहीं है ( flex, order, आदि)।

— adrift

यदि आप तत्वों को लपेट नहीं सकते हैं और आपको अंतिम तीन सही कहने के लिए फ्लोट करने की आवश्यकता है, तो केवल इस margin-left: auto;शैली के साथ आखिरी से तीसरे को लक्षित करें ।

— डैनियल सोकोलोव्स्की

@ जस्टिन ने यह पता लगाया, उन्हें लपेटने की कोई आवश्यकता नहीं है - मैं अपने मामले में नहीं कर सकता। समाधान केवल तीन वस्तुओं में से 1 को लक्षित करना था margin-left: auto;।

— डैनियल सोकोलोव्स्की

Answer 3

यदि आप इसके लिए फ्लेक्सबॉक्स का उपयोग करना चाहते हैं, तो आपको ऐसा करने में सक्षम होना चाहिए, ( display: flexकंटेनर flex: 1पर, आइटम text-align: rightपर और .c):

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... या वैकल्पिक रूप से (और भी सरल), यदि आइटम को पूरा करने की आवश्यकता नहीं है, तो आप justify-content: space-betweenकंटेनर पर उपयोग कर सकते हैं और text-alignनियमों को पूरी तरह से हटा सकते हैं :

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

यहाँ आप को जल्दी से कोशिश करने की अनुमति देने के लिए कोडपेन पर एक डेमो दिया गया है।

Comments

space-betweenवास्तव में मैं क्या देख रहा था, धन्यवाद!

— एडी फ्लेचर

दूसरा सुझाव, अपेक्षित व्यवहार का उपयोग करते समय सीमाएँ गायब हो जाती हैं? codepen.io/oshihirii/pen/RygKRd

— user1063287

Answer 4

आप शेष स्थान को भरने के लिए भराव का भी उपयोग कर सकते हैं।

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

मैंने 3 अलग-अलग संस्करणों के साथ समाधान को अपडेट किया है। यह एक अतिरिक्त भराव तत्व का उपयोग करने की वैधता की चर्चा के कारण है। यदि आप कोड को चलाते हैं तो आप देखते हैं कि सभी समाधान अलग-अलग काम करते हैं। उदाहरण के लिए आइटम बी पर भराव वर्ग स्थापित करने से यह आइटम शेष स्थान को भर देगा। इसका यह लाभ है कि कोई 'मृत' स्थान नहीं है जो क्लिक करने योग्य नहीं है।

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Comments

अंत में कोई व्यक्ति जो flexbox को समझता है

— Kokodoko

@Kododoko हाँ, एक और गैर-अर्थ html HTML तत्व का उपयोग करके दूसरे तत्व को स्थानांतरित करना फ्लेक्सबॉक्स को समझने में सबसे ऊपर है ...

— Zanshin13

@ Zanshin13 अन्य जवाब सभी इतना अतिरिक्त सीएसएस लिखते हैं कि आप फ्लेक्स कंटेनर को छोड़ सकते हैं और पूरी बात को खुद कोड कर सकते हैं :)

— कोकोडको

@Kododoko justify-content: space-between"इतनी" सीएसएस है, गंभीरता से? आगे टिप्पणी के लिए कोई ज़रूरत नहीं है (लेकिन यदि आप चाहते हैं - चैट में आपका स्वागत है)। इस उत्तर यहाँ आकर अपने अधिकार है, क्योंकि यह है एक समाधान। लेकिन निश्चित रूप से इष्टतम नहीं है । Idk, हो सकता है कि आपने नोटिस नहीं किया हो, लेकिन दूसरे उत्तरों से अधिकांश सीएसएस ओपी के हैं और उत्तर वास्तव में लेखक की सीएसएस की मात्रा (थोड़ा सा) घटाते हैं। इस उत्तर में कम सीएसएस नहीं है तो अन्य (ओपी के सीएसएस के बिना काम नहीं करेंगे - jsfiddle.net/63ma3b56 )। लेकिन इसमें एक और html एलिमेंट है।

— Zanshin13

Answer 5

या आप बस इस्तेमाल कर सकते हैं justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

Comments

justify-content: विशेषता फ्लेक्स-कंटेनर की एक विशेषता है, क्रिस Coyer के flexy cheatsheet देख css-tricks.com/snippets/css/a-guide-to-flexbox

— der Weij क्लास वैन

इस पृष्ठ पर यह एकमात्र समाधान है जिसने मेरे लिए काम किया।

— user2847376

Answer 6

इतना आसान जैसे की

.main {
    display: flex;
    flex-direction:row-reverse;
}

Answer 7

अपनी स्टाइलशीट में निम्नलिखित सीएसएस क्लास जोड़ें:

.my-spacer {
    flex: 1 1 auto;
}

बाईं ओर के तत्व के बीच एक खाली तत्व रखें और जिस तत्व को आप दाएं-संरेखित करना चाहते हैं:

<span class="my-spacer"></span>

Comments

उन लोगों के लिए जो केवल एक ही तत्व को सही संरेखित नहीं करना चाहते हैं, लेकिन एक तत्व को बाएं संरेखित करना चाहते हैं, और दूसरा संरेखित करें (उसी फ्लेक्स लेआउट के भीतर) यह जाने का तरीका है!

— सेन्सि जेम्स

Answer 8

यदि आपको एक आइटम को संरेखित करने की आवश्यकता है (हेडर की तरह) लेकिन फिर कई आइटम दाएं संरेखित (जैसे 3 चित्र), तो आप इसके लिए कुछ करेंगे:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

यहाँ है कि क्या दिखेगा (केवल relavent CSS ऊपर स्निपेट में शामिल किया गया था)

Answer 9

'जस्टिफाई-कंटेंट: फ्लेक्स-एंड' प्राइस बॉक्स कंटेनर के भीतर काम करता है।

.price-box {
    justify-content: flex-end;
}

Answer 10

मुझे लगता है कि फ्लेक्स कंटेनर में 'जस्टिफाई-कंटेंट: फ्लेक्स-एंड' को जोड़ने से समस्या का समाधान हो जाता है, जबकि 'जस्टिफाई-कंटेंट: स्पेस-बीच' कुछ भी नहीं करता है।

Answer 11

कोणीय और फ्लेक्स-लेआउट का उपयोग करने वालों के लिए, फ्लेक्स-आइटम कंटेनर पर निम्नलिखित का उपयोग करें:

<div fxLayout="row" fxLayoutAlign="flex-end">

FxLayoutAlign डॉक्स देखें यहाँ और पूर्ण fxLayout डॉक्स यहाँ ।

Answer 12

जवाब के आधार पर उदाहरण कोड TetraDev द्वारा

दाईं ओर की छवियां:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

बाईं ओर के चित्र:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>