www - محاذاة النص في html




كيفية توسيط الحاوية المرنة ولكن العناصر المرنة اليسرى (2)

أريد أن يتم توسيط العناصر المرنة ولكن عندما يكون لدينا سطر ثانٍ ، يكون لدينا 5 (من الصورة أدناه) تحت 1 ولا يتم توسيطها في الأصل.

إليك مثال على ما لدي:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/


تحدي و تحدي Flexbox

يكمن التحدي في توسيط مجموعة من العناصر المرنة ومحاذاة يسارها في الالتفاف. ولكن ما لم يكن هناك عدد محدد من الصناديق في كل صف ، ولكل مربع عرض ثابت ، فإن هذا غير ممكن حاليًا مع flexbox.

باستخدام الكود الذي تم نشره في السؤال ، يمكننا إنشاء حاوية فليكس جديدة تلتف الحاوية المرنة الحالية ( ul ) ، والتي من شأنها أن تسمح لنا ul justify-content: center .

ثم يمكن محاذاة عناصر المرن من ul مع justify-content: flex-start .

#container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

يؤدي هذا إلى إنشاء مجموعة محورية من العناصر المرنة المحاذية لليسار.

المشكلة في هذه الطريقة هي أنه في بعض أحجام الشاشة ، ستكون هناك فجوة على يمين ul ، مما يجعل الظهور لم يعد مركزًا.

يحدث هذا لأنه في التخطيط المرن (وفي الواقع ، CSS بشكل عام) الحاوية:

  1. لا يعرف متى يلتف عنصر ؛
  2. لا يعلم أن مساحة سبق شغلها أصبحت فارغة الآن ، و
  3. لا يعيد حساب عرضه لتقليص التفاف التخطيط الضيق.

الحد الأقصى لطول المسافة البيضاء على اليمين هو طول العنصر المرن الذي تتوقعه الحاوية.

في العرض التوضيحي التالي ، من خلال إعادة تحجيم النافذة أفقياً ، يمكنك رؤية المسافة البيضاء تأتي وتذهب.

DEMO

نهج أكثر عملية

يمكن تحقيق التصميم المرغوب دون استخدام flexbox باستخدام استعلامات الوسائط inline-block .

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

ul {
    margin: 0 auto;                  /* center container */
    width: 1200px;
    padding-left: 0;                 /* remove list padding */
    font-size: 0;                    /* remove inline-block white space;
                                        see https://.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

يعرض الرمز أعلاه حاوية ذات محور أفقي مع عناصر فرعية محاذاة إلى اليسار مثل هذا:

DEMO

خيارات أخرى

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

  • ديساندرو البناء

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

    المصدر: http://masonry.desandro.com/

  • CSS الشبكة تخطيط وحدة المستوى 1

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

    المصدر: https://drafts.csswg.org/css-grid/


كما اقترح @ michael ، هذا هو وجود قيود مع flexbox الحالي. ولكن إذا كنت لا تزال ترغب في استخدام justify-content: center; flex justify-content: center; ، ثم يمكننا حل هذا عن طريق إضافة عنصر دمية وهمية وتعيين margin-left .

    const handleResize = () => {
        const item_box = document.getElementById('parentId')
        const list_length  = item_box.clientWidth
        const product_card_length = 200 // length of your child element
        const item_in_a_row = Math.round(list_length/product_card_length)
        const to_be_added = item_in_a_row - parseInt(listObject.length % item_in_a_row) // listObject is the total number items
        const left_to_set = (to_be_added - 1 ) * product_card_length // -1 : dummy item has width set, so exclude it when calculating the left margin 
        const dummy_product = document.querySelectorAll('.product-card.dummy')[0]
        dummy_product.style.marginLeft = `${left_to_set}px`
    }
    handleResize() // Call it first time component mount
    window.addEventListener("resize", handleResize); 

تحقق هذا الكمان (تغيير حجم ونرى) أو الفيديو للرجوع إليها







flexbox