Part 9 المواقف والتنسيق (Positioning & Layout) في CSS – سلسلة FSWD -CSS

المواقف والتنسيق (Positioning & Layout) في CSS

التحكم في المواقف والتنسيق هو جزء أساسي من تصميم صفحات الويب باستخدام CSS. يمكنك ترتيب العناصر في الصفحة بشكل مرن باستخدام خصائص الـ Positioning و Layout مثل Flexbox و Grid. في هذا الدرس، سنغطي كيفية استخدام هذه الخصائص لتحسين ترتيب وتصميم العناصر في الصفحة.

---

1. الـ Positioning في CSS

في CSS، الـ positioning يحدد كيف سيتم ترتيب العناصر داخل الصفحة، ويوفر لك خيارات مختلفة مثل static, relative, absolute, fixed, و sticky، والتي تمنحك مرونة في تحديد مكان العناصر بالنسبة لمحيطها أو بالنسبة للصفحة بأكملها.

1.1 static

• static هو القيمة الافتراضية للمواقف في CSS. عندما يكون العنصر في وضع static، يتم ترتيبه بناءً على ترتيب ظهور العناصر في الـ HTML.

• لا يؤثر على خصائص top, right, bottom, left.

مثال:

div {
    position: static;  /* العنصر في الوضع الافتراضي */
}

1.2 relative

• relative يحدد أن العنصر سيتم ترتيبه بشكل طبيعي ولكن يمكنك تحريكه باستخدام خصائص top, right, bottom, و left، والتي تحرك العنصر بالنسبة لموقعه الأصلي.

مثال

div {
    position: relative;
    top: 20px;  /* تحريك العنصر بمقدار 20px للأسفل */
    left: 30px; /* تحريك العنصر بمقدار 30px لليمين */
}

1.3 absolute

• absolute يحدد أن العنصر سيتم ترتيبه بناءً على أقرب عنصر يحتويه له خاصية position غير static (مثل relative, fixed, sticky).

• يتم تحديد موقعه باستخدام خصائص top, right, bottom, و left.

مثال

div {
    position: absolute;
    top: 50px;  /* العنصر سيظهر 50px من الأعلى */
    left: 100px; /* العنصر سيظهر 100px من اليسار */
}

1.4 fixed

• fixed يحدد أن العنصر سيتم تثبيته في المكان الذي تحدده (بناءً على top, right, bottom, left) بالنسبة للنافذة.

• يظل العنصر ثابتًا حتى عند التمرير.

مثال

div {
    position: fixed;
    top: 0;
    left: 0;  /* العنصر يظل في الزاوية العلوية اليسرى عند التمرير */
}

 

1.5 sticky

• sticky يحدد أن العنصر سيظل ثابتًا حتى يصل إلى موقع معين أثناء التمرير، ثم سيبدأ بالتمرير مع الصفحة.

• يعمل بشكل مشابه لـ relative حتى يصل العنصر إلى الموقع المحدد، ثم يصبح مثل fixed.

مثال

div {
    position: sticky;
    top: 0;  /* العنصر يظل في أعلى الصفحة أثناء التمرير */
}

2. التنسيق باستخدام Flexbox

Flexbox هو نظام تنسيق قوي في CSS يتيح لك توزيع العناصر داخل حاوية بشكل مرن. يساعد في ترتيب العناصر بسهولة أفقياً وعمودياً، مع التحكم في توزيع المسافات بين العناصر.

2.1 مفهوم Flexbox

• Flex container هو الحاوية التي تحتوي على العناصر التي سيتم تنسيقها باستخدام Flexbox.

• Flex items هي العناصر داخل الحاوية.

2.2 خصائص Flexbox الأساسية:

• display: flex;: لتحديد الحاوية كـ flex container.

• flex-direction: يحدد اتجاه العناصر (أفقي أو عمودي).

  • القيم: row, row-reverse, column, column-reverse.

• justify-content: يحدد كيفية توزيع العناصر داخل الحاوية.

  • القيم: flex-start, flex-end, center, space-between, space-around.

• align-items: يحدد كيفية محاذاة العناصر عموديًا.

  • القيم: stretch, flex-start, flex-end, center, baseline.

• align-self: محاذاة عنصر فردي داخل الحاوية.

مثال

.container {
    display: flex;  /* تعريف الحاوية كـ flex container */
    justify-content: center;  /* محاذاة العناصر أفقياً في المنتصف */
    align-items: center;  /* محاذاة العناصر عمودياً في المنتصف */
}

.item {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 10px;
}

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

• في هذا المثال، display: flex يتيح ترتيب العناصر داخل .container باستخدام Flexbox. العناصر تتم محاذاتها بشكل مركزي أفقياً وعمودياً.

2.3 استخدام flex-wrap

• flex-wrap يسمح للعناصر أن تلتف عندما لا يكون هناك مساحة كافية في الحاوية.

  • القيم: nowrap, wrap, wrap-reverse.

مثال

.container {
    display: flex;
    flex-wrap: wrap;  /* العناصر ستلتف إذا كانت المساحة غير كافية */
}

 

3. التنسيق باستخدام CSS Grid

CSS Grid هو نظام تنسيق قوي آخر يسمح لك بإنشاء تخطيطات معقدة بسهولة، ويتيح لك تقسيم الصفحة إلى شبكة من الصفوف والأعمدة.

3.1 مفهوم CSS Grid

• Grid container هو العنصر الذي يحتوي على شبكة من الصفوف والأعمدة.

• Grid items هي العناصر داخل الشبكة.

3.2 خصائص Grid الأساسية:

• display: grid;: لتحديد الحاوية كـ grid container.

• grid-template-columns: لتحديد الأعمدة في الشبكة.

• grid-template-rows: لتحديد الصفوف في الشبكة.

• grid-gap: لتحديد المسافة بين العناصر في الشبكة.

مثال

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 أعمدة متساوية */
    grid-gap: 20px;  /* المسافة بين العناصر */
}

.item {
    background-color: #3498db;
    height: 100px;
}

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

• في هذا المثال، .container تم تعيينه كـ grid container يحتوي على 3 أعمدة متساوية باستخدام grid-template-columns: repeat(3, 1fr).

3.3 استخدام grid-template-areas

• grid-template-areas يسمح لك بتحديد تخطيط شبكة باستخدام أسماء للصفوف والأعمدة.

مثال

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "main main sidebar"
        "footer footer footer";
    grid-gap: 10px;
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

HTML

<div class="container">
    <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
</div>

• في هذا المثال، يتم تحديد الشبكة باستخدام grid-template-areas، مما يسهل ترتيب العناصر داخل الشبكة.

---

كود مثال كامل:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على الـ Positioning و Flexbox و Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Flexbox Example -->
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>

    <!-- Grid Example -->
    <div class="grid-container">
        <div class="grid-item">Header</div>
        <div class="grid-item">Main Content</div>
        <div class="grid-item">Sidebar</div>
        <div class="grid-item">Footer</div>
    </div>

</body>
</html>

CSS (styles.css)

/* Flexbox */
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #f0f0f0;
}

.flex-item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    margin: 10px;
    text-align: center;
}

/* Grid */
.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "main main sidebar"
        "footer footer footer";
    grid-gap: 10px;
    background-color: #f0f0f0;
    padding: 20px;
}

.grid-item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

الشرح:

1. Flexbox: في هذا المثال، .flex-container يحتوي على 3 عناصر (.flex-item)، وتستخدم خصائص Flexbox لضبط توزيع العناصر بشكل مركزي عمودياً وأفقياً.

2. Grid: .grid-container تم تعيينه كـ grid container باستخدام display: grid، حيث يتم تحديد شبكة من الأعمدة والصفوف باستخدام grid-template-areas