आइटम के कॉलम के अंदर से अपने स्वयं के कॉलम में एक फ्लेक्स आइटम को स्थानांतरित करना

यदि मेरे पास flex-direction: column के साथ तीन बच्चों के साथ एक फ्लेक्स कंटेनर है, और मैं पहले और तीसरे बच्चे को बाईं ओर रखते हुए मध्य बच्चे को दाईं ओर ले जाना चाहता हूं , मुझे यह कैसे करना है?आइटम के कॉलम के अंदर से अपने स्वयं के कॉलम में एक फ्लेक्स आइटम को स्थानांतरित करना

क्या फ्लेक्सबॉक्स भी सही दृष्टिकोण है या कुछ और उपयुक्त है?

यह मेरा प्रयास है:

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    @media (max-width: 840px) { 
 
    flex-flow: column wrap; 
 
    } 
 
} 
 
.red, 
 
.green, 
 
.blue { 
 
    width: 50%; 
 
    @media (max-width: 840px) { 
 
    width: 100%; 
 
    } 
 
} 
 
.red { 
 
    background-color: red; 
 
    height: 100px; 
 
} 
 
.green { 
 
    background-color: green; 
 
    height: 300px; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
    <div class="blue"></div> 
 
</div>

http://codepen.io/dye/pen/mOeZma

यह काफी करीब है, लेकिन काफी नहीं। जब हरा div दाईं ओर जाता है, तो लाल और नीले रंग के बीच एक बड़ा अंतर होता है।

किसी भी सलाह की सराहना की जाएगी। धन्यवाद!

स्रोत

2016-11-10 dye

सबसे अच्छा तरीका है मुझे लगता है कि स्थिति तीसरे बच्चे 'absolute' है। –

उत्तर नहीं है। फ्लेक्सबॉक्स में लचीलापन नहीं है जो आप चाहते हैं खासकर जब आप गतिशील बना रहे हों।

यदि यह स्थिर है

.container { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
     -ms-flex-flow: row wrap; 
 
      flex-flow: row wrap; 
 
} 
 

 
.holder { 
 
    width: 50%; 
 
} 
 
.holder .red, .holder .blue { 
 
    width: 100%; 
 
} 
 

 
.red, 
 
.green, 
 
.blue { 
 
    width: 50%; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    height: 100px; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
    height: 300px; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="holder"> 
 
    <div class="red"></div> 
 
    <div class="blue"></div> 
 
    </div> 
 
    <div class="green"></div> 
 
</div>

तो, इस सवाल का जवाब जावास्क्रिप्ट में हो सकता है।

मैं सिर्फ चिनाई का उपयोग करना पसंद करता हूं।

http://masonry.desandro.com/

निर्देश सीधी-सपाट हैं। सेटअप करना आसान है।

स्रोत

2016-11-10 09:17:01

.green{ 
 
    float: right; 
 
} 
 
.red, 
 
.green, 
 
.blue { 
 
    width: 50%; 
 
display: inline-block; 
 
} 
 
.red { 
 
    background-color: red; 
 
    height: 100px; 
 
} 
 
.green { 
 
    background-color: green; 
 
    height: 300px; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
    height: 100px; 
 
}


 

 
<body> 
 
    <div class="container"> 
 
     <div class="red"></div> 
 
     <div class="green"></div> 
 
     <div class="blue"></div> 
 
    </div> 
 
    </body>

Ive flex बॉक्स हटा दिया है और यह float बजाय। बहुत सरल मुझे लगता है कि

स्रोत

2016-11-10 09:18:13

इनमें से न तो सीधे अपने सवाल का जवाब लेकिन भविष्य में जो लोग इसी तरह के सवाल के साथ यहाँ का रास्ता बताएं काम का हो सकता है ..

।jQuery बस है: संभावना है कि आप सही (हरा) के रूप में दो बाएं ब्लॉक एक ही ऊंचाई यहां रखना चाहते कर रहे हैं पर आप यह कैसे कर सकता है

टिप्पणी (मैं दो रैपर, अतिरिक्त कोड जोड़) प्रदर्शन के उद्देश्य से

// the jquery is just to adjust height for vertical flex demonstration 
 
$('adjustorator').click(function() {var heights = Array(100, 150, 200, 250, 300, 350, 450, 500);var height = heights[Math.floor(Math.random()*heights.length)]; \t $('.green').css('height', height)});

.container { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
.left, .right { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 50%; 
 
} 
 

 
.red, .blue, .green { 
 
    width: 100%; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
    height: 400px; 
 
} 
 

 
// scaffolding below, ignore 
 
body { position: relative; } 
 
adjustorator { display: flex; position: fixed; bottom: 0; left: 50%;transform: translateX(-50%); padding: 4px 8px 2px 8px; font-variant: small-caps; color: hsla(0, 0%, 80%, 1); background-color: hsla(0, 0%, 20%, 1); border-radius: 5px 5px 0px 0px; cursor: pointer;} 
 
adjustorator:hover { background-color: hsla(200, 40%, 40%, 1); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="left"> 
 
    <div class="red"></div> 
 
    <div class="blue"></div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="green"></div> 
 
    </div> 
 
</div> 
 

 
<!-- scaffolding, ignore --> 
 
<adjustorator>adjust height</adjustorator>

बेला

के लिए

https://jsfiddle.net/Hastig/42qzzhdu/

मैं भी अपने मूल (गैर) जो लोग भविष्य में यहां आते हैं, एक ऐसी ही प्रश्न के लिए एक समाधान की तलाश के लिए जवाब छोड़ देंगे

align-self: flex-end;

.हरे को जोड़ा गया

बेला

https://jsfiddle.net/Hastig/42qzzhdu/1/

स्रोत

2016-11-10 09:19:33

मुझे यह कहकर शुरू करना है कि मुझे फ्लेक्सबॉक्स पसंद है। अपने सिर को उन सभी छोटी चीजों के आस-पास लाने में कुछ समय लग सकता है जो यह कर सकते हैं।

अगर मुझे लगता है कि सवाल यह है कि मुझे लगता है कि यह वही करता है जो आपको लगता है (आपको इसे पूरी तरह से देखने के लिए पूर्ण स्क्रीन बटन दबा देना होगा, क्योंकि इसमें 840 पीएक्स सामान शामिल था)।

body { 
 
    margin: 0 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    height: 400px 
 
} 
 
.blue, 
 
.green, 
 
.red { 
 
    width: 50vw 
 
} 
 
.red { 
 
    height: 100px; 
 
    background: red 
 
} 
 
.green { 
 
    height: 200px; 
 
    order: 1; 
 
    background: green 
 
} 
 
.blue { 
 
    background: #00f; 
 
    height: 300px 
 
} 
 
@media (max-width: 840px) { 
 
    .container { 
 
    height: auto 
 
    } 
 
    .blue, 
 
    .green, 
 
    .red { 
 
    width: 100vw 
 
    } 
 
    .green { 
 
    order: 0 
 
    } 
 
}

<div class="container"> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
    <div class="blue"></div> 
 
</div>

मैं मैन्युअल रैपिंग को गति प्रदान करने कंटेनर की ऊंचाई सेट है, और मैं हरे रंग की एक सकारात्मक आदेश दे दिया है ताकि वह सूची में सबसे नीचे है। हालांकि जब यह छोटा होता है और सभी एक कॉलम में मैंने ऑर्डर ले लिया है तो यह बीच में है।

मुझे आशा है कि इस मदद करता है, और flexbox ;-)

स्रोत

2016-11-10 09:35:03

यह सही है! धन्यवाद! मुझे फ्लेक्सबॉक्स भी पसंद है, लेकिन मैं इस तरह की जटिलताओं के माध्यम से तर्क पर भयानक हूं। – dye

क्या आपकी विधि का उपयोग करने का कोई तरीका है यदि बाईं ओर गतिशील ऊंचाई होगी? विशेष रूप से, नीली बच्चा (नीचे बाएं) बदल जाएगा क्योंकि सामग्री इसमें जोड़ा जाता है। क्या मैं सिर्फ कंटेनर की ऊंचाई को नीले रंग के रूप में बदलता हूं? ऊंचाई निर्दिष्ट किए बिना, हरा नीला नीचे रहता है। सबसे अच्छा अभ्यास क्या है? – dye

वर्ग .हरे करने के क्रम संपत्ति जोड़े पर कभी हार नहीं।

.green { 
    background-color: green; 
    height: 300px; 
    order: 1; 
}

और आप के रूप में अच्छी सभी तत्वों को आदेश कर सकते हैं।

.red { 
    background-color: red; 
    height: 100px; 
    order: 1; 
} 

.green { 
    background-color: green; 
    height: 300px; 
    order: 3; 
} 

.blue { 
    background-color: blue; 
    height: 100px; 
    order: 2; 
}

स्रोत

2016-11-10 09:37:45

डिफ़ॉल्ट रूप से सब कुछ ऑर्डर 0 है, जिसका अर्थ है कि यह पृष्ठ में मौजूद क्रम में प्रस्तुत करेगा। इसलिए केवल एक आइटम ऑर्डर देने से अंत तक यह होगा :-) –

बिल्कुल, आदेश का डिफ़ॉल्ट मान 0 (y) है –

शायद आपको केवल अधिकतम चौड़ाई के लिए कंटेनर के लिए फ्लेक्स चालू करना चाहिए: 840px? उच्च संकल्पों के लिए आप कंटेनर डिस्प्ले ब्लॉक बना सकते हैं और पहले और तीसरे div को बाएं और दूसरे से दाएं फ्लोट कर सकते हैं, बस इतना ही।

.container { 
    @media (max-width: 840px) { 
     display: flex; 
     flex-flow: column wrap; 
    } 
} 

.red, 
.green, 
.blue { 
    width: 50%; 
    @media (max-width: 840px) { 
     width: 100%; 
    } 
} 

.red { 
    background-color: red; 
    height: 100px; 
    @media (min-width: 841px) { 
     float: left; 
    } 
} 

.green { 
    background-color: green; 
    height: 300px; 
    @media (min-width: 841px) { 
     float: right; 
    } 
} 

.blue { 
    background-color: blue; 
    height: 100px; 
    @media (min-width: 841px) { 
     float: left; 
    } 
}

http://codepen.io/anon/pen/QGjegM

स्रोत

2016-11-10 09:52:34 Joint

आइटम के कॉलम के अंदर से अपने स्वयं के कॉलम में एक फ्लेक्स आइटम को स्थानांतरित करना

उत्तर

संबंधित मुद्दे