محاذاة css : كيفية استخدام justify في صفحة الويب

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

 

تعريف

.container{
    //coordinates

    display:flex;
    flex-direction: row;
}

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

 

فوائد

استخدام محاذاة المحتوى لها فوائد عديدة يمكن تلخيصها على النحو التالي:

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

 

سلبيات محاذاة css

كما هو معتاد في التكنولوجيا ، هناك إيجابيات وسلبيات. من عيوب استخدام تبرير المحتوى:

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

 

مثال

من فضلك ، لفهم CSS Justify جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

.container{
    width:800px;
    margin:50px auto;
    background-color:#D9D9D9;
    display:flex;
    flex-direction: row;
}

.container div{
    background-color:#592C2C;
    color:#FFF;
    width:200px;
    height:100px;
    padding:10px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS  Flex Flow | Justify Content</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "container">
            <div>Div1</div>
            <div>Div2</div>
            <div>Div3</div>
        </div>

    </body>

</html>