القائمة الرئيسية

الصفحات

HTML

شرح خاصية Flexbox في CSS

محمد دوس
(0)

شرح خاصية Flexbox في CSS

في عالم تصميم الويب، يعتبر Flexbox أداة قوية ومرنة لتنظيم العناصر داخل الحاويات. يساعدك Flexbox على ترتيب العناصر بشكل مرن، سواء كان ذلك بشكل أفقي أو عمودي، كما يوفر لك العديد من الخيارات للتكيف مع أحجام الشاشة المختلفة.

ما هو Flexbox؟

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

عند استخدام Flexbox، يتم التعامل مع الحاوية كـ "حاوية مرنة" تحتوي على عناصر "مرنة". يمكنك استخدام العديد من الخصائص لتحديد كيفية ترتيب هذه العناصر داخل الحاوية.

كيفية استخدام Flexbox في CSS

لاستخدام Flexbox، يجب عليك تحديد الحاوية كـ "حاوية Flex" باستخدام الخاصية display: flex;.

مثال على استخدام Flexbox

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>تخطيط باستخدام Flexbox</title>

    <style>

        .flex-container {

            display: flex;

            justify-content: space-between; /* توزيع العناصر مع المسافات بينهما */

            align-items: center; /* محاذاة العناصر عمودياً */

            height: 100vh; /* ملء ارتفاع الصفحة بالكامل */

        }

        .box {

            width: 100px;

            height: 100px;

            background-color: lightblue;

            margin: 10px;

        }

    </style>

</head>

<body>

    <div class="flex-container">

        <div class="box">عنصر 1</div>

        <div class="box">عنصر 2</div>

        <div class="box">عنصر 3</div>

    </div>

</body>

</html>

التفسير

  • display: flex;: تُحول الحاوية إلى "حاوية Flex" بحيث يتم التعامل مع العناصر بمرونة.
  • justify-content: space-between;: تقوم بتوزيع العناصر داخل الحاوية مع وضع مسافات متساوية بين كل عنصر وآخر.
  • align-items: center;: يقوم بمحاذاة العناصر عموديًا داخل الحاوية.
  • height: 100vh;: يحدد ارتفاع الحاوية ليكون كامل ارتفاع الشاشة.

الخصائص الأساسية في Flexbox

فيما يلي بعض الخصائص الأساسية التي يمكنك استخدامها مع Flexbox:

  • justify-content: تتحكم في توزيع العناصر أفقيًا داخل الحاوية. القيم المتاحة: flex-start (بداية الحاوية)، flex-end (نهاية الحاوية)، center (في المنتصف)، space-between (توزيع مع مسافات متساوية بين العناصر)، space-around (توزيع مع مسافات متساوية حول العناصر).
  • align-items: تتحكم في محاذاة العناصر عموديًا داخل الحاوية. القيم المتاحة: flex-start (أعلى الحاوية)، flex-end (أسفل الحاوية)، center (في المنتصف)، stretch (يتم توسيع العناصر لتغطية المساحة المتاحة).
  • flex-direction: تحدد اتجاه العناصر داخل الحاوية. القيم المتاحة: row (العناصر في صف أفقي)، column (العناصر في عمود عمودي).

توسيع العناصر باستخدام Flexbox

يمكنك أيضًا تحديد كيفية توسع العناصر داخل الحاوية باستخدام خاصية flex لكل عنصر. يتيح لك هذا تحديد مقدار المساحة التي يجب أن يشغلها العنصر داخل الحاوية.

مثال على توسع العناصر باستخدام Flexbox

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>توسيع العناصر باستخدام Flexbox</title>

    <style>

        .flex-container {

            display: flex;

        }

        .box {

            background-color: lightcoral;

            margin: 10px;

            padding: 20px;

            flex-grow: 1; /* السماح لكل عنصر بالنمو ليشغل المساحة المتاحة */

        }

    </style>

</head>

<body>

    <div class="flex-container">

        <div class="box">عنصر 1</div>

        <div class="box">عنصر 2</div>

        <div class="box">عنصر 3</div>

    </div>

</body>

</html>

في هذا المثال، يتم السماح لكل عنصر داخل الحاوية بالنمو باستخدام الخاصية flex-grow: 1;، مما يعني أن كل عنصر سيشغل نفس المساحة المتاحة داخل الحاوية.

الخلاصة

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

أخر المواضيع من قسم : HTML

تعليقات

إرسال تعليق

أترك بصمتك بتعليق على مدونة التربية و التعليم