تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


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


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

هناك العديد من الطرق لتخطيط الموقع. بمرور الوقت ، ظهرت العديد من التقنيات:

  1. 1. في البداية ، استخدم مصممي المواقع جداول HTML لتقسيم و التخطيط الصفحات (غير مكتمل)
  2. 2. بعد ذلك ، ظهر CSS وبدأنا في عمل تخطيط باستخدام الخاصية float
  3. 3. وكان في هذا الأسلوب عيوب فظهر آخر ، عمليا أكثر ، وهو بإنشاء عناصر جديدة من نوع inline-block على الصفحة
  4. 4. اليوم ، لا تزال هناك تقنية أفضل بكثير: Flexbox ! إنها تتيح جميع الأساليب (أو تقريبًا ) وهي التي أوصي باستخدامها إذا كان لديك إمكانية ، عند إنشاء موقع جديد Flexbox أصبح معروفًا الآن بواسطة جميع المتصفحات الحديثة !
سنكتشف كيف يعمل Flexbox في هذا الفصل. بالنسبة لأولئك الذين يحتاجون إلى معلومات حول تقنيات التخطيط القديمة الأخرى ، أدعوكم إلى مراجعة الفصل "بعض تقنيات التخطيط الأخرى". يمكن أن يكون دائما مفيدا لك.

حاوية ، العناصر


مبدأ التخطيط مع Flexbox بسيط: يمكنك تحديد حاوية ، وفي داخلها تضع عدة عناصر. تخيل لديك صندوق وفيه وضعت عدة أشياء: هذا هو المبدأ! في نفس صفحة الويب ، يمكنك بسهولة امتلاك عدة حاويات (عدة مربعات إذا كنت تفضل ذلك) . الأمر متروك لك لإنشاء العدد الذي تحتاج إليه للحصول على التصميم الذي تريده.

لنبدأ بدراسة كيفية استعمال و تشغيل الصناديق (أم آسف ، حاوية).

css flexbox

الحاوية هي علامة HTML ، والعناصر هي علامات HTML أخرى داخلها


1 العنصر
2 العنصر
3 العنصر

حسنا ، حتى ذلك الآن ، تستطيع أن تتابع.

ولكن إذا قمت بذلك ، بشكل تلقائي ، فإن عناصري ستضع نفسها تحت بعضها البعض لا؟ هذه ما هي الا كتل!

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

css flexbox

لا شيء جديد هو السلوك الطبيعي الذي اعتدنا عليه.

سأريكم لاحقًا كيفية تعيين لون وحدود مختلفين للعناصر باستخدام الفئة : nth-child . في الوقت الحالي ، قمت بتلوين كل عنصر من العناصر بحيث يمكنك تمييزها بسهولة في مثالي!

كن مرنًا!


دعنا نكتشف الآن Flexbox. إذا وضعت خاصية CSS (واحدة فقط) ، فإن كل شيء يتغير. هذه الخاصية هي flex، و أطبقها على الحاوية:


#container
{
    display: flex;
}

... ثم يتم وضع الكتل جنبًا إلى جنب افتراضيًا انه السحر!

css flexbox

الاتجاه


Flexbox يسمح لنا بترتيب هذه العناصر في الاتجاه الذي نريده. مع flex-direction ، يمكننا وضعهم عموديا أو عكس اتجاههم . يمكن أن يأخذ القيم التالية:

  • row (الصف): منظمين على خط (تلقائي)
  • column (العمود): منظمين على عمود
  • row-reverse (عكس الصف): منظمين على خط ، ولكن بترتيب عكسي
  • column-reverse (عكس العمود): منظمين على عمود ، ولكن بترتيب عكسي

على سبيل المثال:


#container
{
    display: flex;
    flex-direction: column;
}
css flexbox

ولكن ... هي نفس النتيجة كما في البداية ، لا؟ كان لدينا هذه النتيجة دون Flexbox !

بالفعل. ولكن الآن بعد أن أصبحت عناصرنا مرنة ، فلديهم الكثير من الخصائص المفيدة الأخرى التي سنراها بعد ذلك ، سنعود إليها. حاول أيضًا اختبار الترتيب العكسي لرؤية:


#container
{
    display: flex;
    flex-direction: column-reverse;
}
css flexbox

انظر إلى الفرق: الكتل الآن في ترتيب عكسي! لم أقم بتغيير كود HTML على الإطلاق ، والذي ظل كما هو منذ البداية.

العودة إلى السطر


بشكل تلقائي ، تحاول الكتل البقاء على نفس الخط إذا لم يكن لديها مساحة (والتي يمكن أن تسبب أخطاء التصميم في بعض الأحيان). إذا كنت ترغب في ذلك ، يمكنك أن تطلب من الكتل الانتقال إلى السطر عندما لم يعد لها مكان باستعمال flex-wrap الذي يمكنه أخذ هذه القيم:

  • nowrap : لا عودة إلى السطر (التلقائي)
  • wrap: العناصر تذهب إلى السطر عندما لا يكون هناك مساحة
  • wrap-reverse: تذهب العناصر إلى السطر عندما لا يكون هناك مساحة لكن في الاتجاه المعاكس

على سبيل المثال:


#container
{
    display: flex;
    flex-wrap: wrap;
}

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

css flexbox

تصفيف العناصر


إعادة . يتم تنظيم العناصر إما أفقيا (تلقائيا) أو عموديا. هذا يحدد ما يسمى المحور الرئيسي . يوجد أيضًا محور ثانوي (محور متقاطع):

  • إذا تم تنظيم العناصر أفقيا ، فإن المحور الثانوي هو المحور العمودي.
  • إذا تم تنظيم العناصر عموديًا ، فإن المحور الثانوي هو المحور الأفقي.

لماذا أخبرك بهذا؟ لأننا سوف نكتشف كيفية تصفيف العناصر على المحور الرئيسي و على المحور الثانوي.

تصفيف على المحور الرئيسي

ببساطة ، لنبدأ بالعناصر المنظمة أفقيًا (هذه هي الحالة تلقائيا).

لتغيير التصفيف ، سنستخدم justify-content ، والتي يمكن أن تأخذ هذه القيم:

  • flex-start: محاذاة في البداية (تلقائي)
  • flex-end: محاذاة في النهاية
  • center: الانحياز في الوسط
  • space-between: يتم تمديد العناصر على طول المحور (هناك مسافة بينهما)
  • space-around: كما سبق ، يتم تمديد العناصر في جميع أنحاء المحور ، لكنها تترك أيضًا مساحة على الأطراف

مثلا :


#container
{
    display: flex;
    justify-content: space-around;
}

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

css flexbox

هل ترى كيف تصطف العناصر بشكل مختلف حسب الحالة؟ مع خاصية بسيطة ، يمكننا ترتيب عناصرنا بذكاء كما نريد! الآن ، إليك ما يجب فهمه: إنه يعمل إذا كانت عناصرك في اتجاه عمودي . في هذه الحالة ، يصبح المحور العمودي هو المحور الرئيسي ، justify-content وينطبق أيضًا على:


#container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 350px; / * ارتفاع قليل بحيث تحتوي العناصر على مساحة للتحرك * /
}
css flexbox

مع الاتجاه العمودي (العمود) ، يعمل التمركز بنفس الطريقة هذه المرة في الارتفاع!

حاول ، أنت تلعب انت الآن !

تصفيف على المحور الثانوي

كما قلت لك ، إذا وضعت عناصرنا في اتجاه أفقي (خط) ، فإن المحور الثانوي هو ... عمودي. وعلى العكس ، إذا كانت عناصرنا في اتجاه عمودي (عمود) ، فإن المحور الثانوي أفقي. مع align-items ، يمكننا تغيير المحاذاة على المحور الثانوي. يمكنه أن يأخذ هذه القيم:

  • stretch: يتم تمديد العناصر في جميع أنحاء المحور (القيمة الافتراضية)
  • flex-start: محاذاة في البداية
  • flex-end: محاذاة في النهاية
  • center: الانحياز في الوسط
  • baseline: محاذاة على خط الأساس (على غرار flex-start)

بالنسبة لهذه الأمثلة ، سوف نفترض أن عناصرنا في اتجاه أفقي (لكن لا تتردد في الاختبار في الاتجاه العمودي!).


#container
{
    display: flex;
    justify-content: center;
    align-items: center;
}
css flexbox

يتيح لنا المحاذاة على المحور الثانوي مع عناصر المحاذاة توسيط العنصر بالكامل في الحاوية!

St Graal web developer ، التمركز العمودي والأفقي يمكن الحصول عليهما بسهولة أكبر. قل أن الحاوية الخاصة بك عبارة عن flexbox وقم بإعداد هوامش تلقائية على العناصر الموجودة في الداخل. هذا كل شيئ جرب بنفسك هذا !


#container
{
    display: flex;
}

.element
{
    margin: auto;
}
محاذاة عنصر واحد

من الممكن إجراء استثناء لأحد العناصر على المحور الثانوي فقط مع align-self :


#container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.element:nth-child(2) 
{
    background-color: blue;
    align-self: flex-end; 
}

النتيجة:

css flexbox

عنصر محاذى بشكل مختلف عن العناصر الأخرى ذات المحاذاة الذاتية

تقسيم عدة خطوط


إذا كان لديك خطوط متعددة في Flexbox ، فيمكنك اختيار كيفية توزيعها align-content .

هذه الخاصية ليس لها أي تأثير إذا كان هناك سطر واحد فقط في Flexbox.

لذلك دعونا نأخذ حالة اين يكون لدينا العديد من الاسطر. سأضيف عناصر:


<div id="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

أسمح لعناصري بالانتقال إلى السطر مع flex-wrap :


#container
{
    display: flex;
    flex-wrap: wrap;
}
css flexbox

خطوط متعددة في Flexbox

حتى الآن ، لا شيء جديد حقًا. دعونا نرى كيف يتم توزيع الخطوط بشكل مختلف مع الخاصية الجديدة align- content التي أردت تقديمها. يمكنها أن تأخذ هذه القيم:

  • flex-start: يتم وضع العناصر في البداية
  • flex-end: يتم وضع العناصر في النهاية
  • center: يتم وضع العناصر في المركز
  • space-between: العناصر مفصولة بمسافة بينها
  • space-around: نفسه ، ولكن هناك أيضا مساحة في البداية والنهاية
  • stretch (تلقائي): تمدد العناصر لتشغل كل المساحة

هذه هي القيم المختلفة:

css flexbox

يتم وضع الخطوط بشكل مختلف مع محاذاة المحتوى

تذكير بالترتيب


بدون تغيير كود HTML ، يمكننا تغيير ترتيب العناصر في CSS بفضل الخاصية order ما عليك سوى الإشارة إلى رقم ، وسيتم فرز العناصر من الأصغر إلى الأكبر. لنأخذ سطرًا بسيطًا يتكون من 3 عناصر:


#container
{
    display: flex;
}
css flexbox

إذا قلت أنه سيتم وضع العنصر الأول في الموضع الثالث ، والثاني في الموضع الأول والثالث في الموضع الثاني ، يتغير الترتيب على الشاشة!


.element:nth-child(1)
{
    order: 3;
}
.element:nth-child(2)
{
    order: 1;
}
.element:nth-child(3)
{
    order: 2;
}
css flexbox

مع النظام ، يمكننا إعادة ترتيب العناصر في CSS

حتى أكثر مرونة: يمكنك تكبير او تصغير العناصر


سنستخدم أسلوبًا أخيرًا آخر ، ثم نذهب إلى التدريب.

باستخدام الخاصية flex ، يمكننا السماح لعنصر يكبر حجمه ليشغل كل المساحة المتبقية.


.element:nth-child(2)
{
    flex: 1;
}
css flexbox

يمتد العنصر الثاني ليشغل كل المساحة

يشير الرقم الذي تحدده للخاصية flex إلى مقدار ما يمكن أن يكبر حجمه بالنسبة إلى الآخرين.


.element:nth-child(1)
{
    flex: 2;
}
.element:nth-child(2)
{
    flex: 1;
}

هنا ، يمكن أن يكبر حجم العنصر الأول مرتين أكثر من العنصر الثاني:

css flexbox

يمكن أن ينمو العنصر الأول ضعف نمو العنصر الثاني

الخاصية flex هي في الواقع خاصية فائقة تجمع بين flex-grow (القدرة على النمو) ،
shrink flex- (القدرة على إنقاص الحجم) و flex-basis (الحجم التلقائي) أنا فقط استخدم flex كما أوضحت لك هنا ، ولكن إذا كنت تريد معرفة المزيد ، أدعوك للتعرف على هذه الخصائص الأخرى.

الخلاصة


  • هناك العديد من التقنيات لوضع كتل على صفحة Flexbox .هو أحدث وأقوى التقنيات التي أوصي باستخدامها.
  • مبدأ Flexbox هو وجود حاوية بها عدة عناصر في الداخل. باستخدام display: flex; الحاوية ، يتم ترتيب العناصر الموجودة في الداخل في وضع Flexbox (أفقياً بشكل تلقائي)
  • يمكن Flexbox التعامل مع جميع الاتجاهات. مع flex-direction، يمكن أن يشير إلى ما إذا كانت العناصر مرتبة أفقيا (تلقائيا) أو عموديا. هذا يحدد ما يسمى المحور الرئيسي.
  • محاذاة العناصر على المحور الرئيسي مع justify-content ، وعلى المحور الثانوي مع align-items.
  • مع flex-wrap، يمكننا السماح للعناصر بالعودة إلى السطر إذا كانت لديهم مساحة أكبر.
  • إذا كان هناك العديد من الخطوط ، فيمكننا الإشارة إلى كيفية توزيع الخطوط بينها align-content.
  • يمكن إعادة ترتيب كل عنصر في CSS مع order (لا حاجة للمس كود HTML
  • مع flex، يمكننا أن نسمح لعناصرنا بشغل مساحة متبقية أو أقل.