weschool - كلمات html




كيف تتم محاذاة العنصر المرن إلى اليمين؟ (5)

أو يمكنك فقط استخدام justify-content: flex-end

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

هل هناك طريقة أكثر flexbox-ish لمحاذاة اليمين "جهة الاتصال" من استخدام 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/


إذا كنت بحاجة إلى عنصر واحد يتم تركه محاذاة (مثل الرأس) ، ولكن بعد ذلك تتم محاذاة عناصر متعددة في اليمين (مثل 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
}

هذا ما سيبدو عليه (تم تضمين CSS المغلق فقط في المقتطف أعلاه)


سهلا كما

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

سيكون النهج الأكثر مرونة هو استخدام الهامش الأيسر auto (تعالج العناصر المرنة الهوامش التلقائية بشكل مختلف قليلاً عن استخدامها في سياق تنسيق كتلة).

.c {
    margin-left: auto;
}

تحديث كمان


يمكنك أيضًا استخدام حشو لملء المساحة المتبقية.

<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 إصدارات مختلفة. هذا بسبب مناقشة صلاحية استخدام عنصر حشو إضافي. إذا قمت بتشغيل التعليمات البرمجية التي تم قصها ، فسترى أن جميع الحلول تقوم بأشياء مختلفة. على سبيل المثال ، يؤدي تعيين فئة الحشو على البند b إلى تعبئة هذا العنصر في المساحة المتبقية. هذا له فائدة أنه لا توجد مساحة "ميتة" غير قابلة للنقر.

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





flexbox