html تحجيم ومواءمة العنصر(العناصر) المرن في الصف الأخير بشكل صحيح



css css3 (1)

باستخدام flexbox ، قم بإنشاء 3 أو 4 عناصر "وهمية" تشغل دائمًا الفتحات الأخيرة.

لذلك ، على سبيل المثال ، المستخدم # 82 هو الإدخال الأخير حاليًا.

اجعل المستخدمين المزيفين 83 ، 84 ، 85 مع visibility: hidden .

بدلاً من ذلك ، جرّب عنصرًا وهميًا واحدًا فقط في النهاية visibility: hidden flex-grow: 10 . استهدفها بـ :last-child أو :last-of-type -pseudo-class.

دعنا نقول لدي قائمة من المستخدمين ، ولكل مستخدم بعض الأرقام المرتبطة به. كل مستخدم مدرج على هذا النحو:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

كلها مصممة على:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

إليك مثال على ذلك في العمل:

حسنًا ، يبدو ذلك جيدًا ، يمكن أن تحصل قائمة المستخدمين على فترة طويلة جدًا ، لذا من المهم أن يكون الضغط هنا مهمًا. مشكلتي هي أن هذه الحافة اليمنى غير متسقة بشكل فظيع ، لذلك أتساءل عما إذا كان هناك أي طريقة لتحسين ذلك.

فكرتي الأولى كانت ، بالطبع ، مجرد تحديد عرض ثابت على المسافات. ومع ذلك ، لا يمكن التنبؤ بعرض أسماء المستخدمين تمامًا. يمكنك أن iiiii شخص ما يسمى iiiii وشخص يدعى WWWWW ولكن نظرًا لأن هذا ليس خطًا أحادي المسافة ، فستحصل على "iiiii" و "WWWWW" ، وهما عرضان مختلفان تمامًا هناك. وبالتالي فإن "الحد الأقصى للعرض" سيكون في الأساس أكبر حرف مسموح به ، وهو W ، مضروبًا في طول اسم المستخدم الأقصى. لنجرب ذلك ...

مصريات. قد أستخدم <ul> إذا كانت هذه هي النتيجة التي سأحصل عليها. ربما كان الفكر التالي شيئًا ينطوي على display:table ليكون العرض متناسقًا عبر الأعمدة ، في حين يظل ديناميكيًا - وبافتراض أن معظم الأشخاص لديهم أسماء مستخدمين معقولة (* سعال * ... يا مهلا ، هكذا تفلت من تخفيض السعر ... هاه ...) - لكنها تميل إلى أن ينتهي الأمر بمساحة فارغة كثيرة.

لذلك فكرتي الحالية هي نوع من التبرير. هذا يعمل بشكل جيد للنص ، أليس كذلك؟ لكن ، للأسف ، text-align: justify القيام بذلك على وجه الدقة في كل هذه الحالة ، ربما لأنه لا توجد مسافات بين العناصر المطلوب ضبطها.

كانت محاولتي الأخيرة استخدام flexbox ، وهو شيء أستخدمه بالفعل بشكل جيد في تصميم الموقع الجديد. دعونا نرى كيف يبدو مع display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; على الحاوية ، flex: 1 0 auto; على العناصر ...

هاه ، هذا لا يبدو سيئا للغاية. ليس سيئا للغاية في

... قريب جدا. ما أرغب فيه حقًا هو عدم امتلاك السطر الأخير من العناصر على طول الطريق. لا بأس عندما يكون هناك ثلاثة أو أربعة في السطر الأخير ، ولكن اثنين تبدو سخيفة بعض الشيء وفقط واحد يملأ العرض بأكمله ويبدو سخيفًا.

لذلك أعتقد أن هذه المغامرة الصغيرة كلها تتلخص في سؤال واحد بسيط:

كيف يمكنني تحقيق سلوك يشبه التبرير ، حيث يتم تباعد العناصر لاستخدام العرض الكامل للحاوية ، باستثناء السطر الأخير الذي يجب أن يستخدموا فيه عرضهم الطبيعي؟

لإكمال هذه القصة الصغيرة ، وبفضل إجابة @ Michael_B ، إليك كيفية تنفيذ الحل:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

والنتيجة:

جميلة.





flexbox