#45 | CSS Flex box | تعلم Flexbox بالكامل في فيديو واحد

رابط موقع nouvil flexbox :
nouvil.net/flex-box-game/
تواصل معي على انستا
/ abdelrahman_noufal
__________________________
في هذا الفيديو، سوف نتحدث عن خاصية "flexbox" في CSS والتي تعتبر واحدة من أهم الخصائص في تصميم صفحات الويب.
تم تصميم flexbox لتسهيل تنظيم وترتيب العناصر داخل العناصر الأساسية في صفحة الويب، ويمكن استخدامها لتحقيق العديد من التخطيطات الرائعة التي تساعد على تحسين تجربة المستخدم.
سوف نتعلم في هذا الفيديو كيفية استخدام خاصية flexbox، بما في ذلك كيفية تحديد عناصر flex، وتحديد الاتجاه والترتيب، وتحديد مساحة العناصر وتحديد مواضعها داخل العناصر الأساسية.
كما سوف نناقش بعض الخصائص الأخرى التي يمكن استخدامها مع flexbox، مثل align-items و justify-content و flex-wrap وغيرها.
في النهاية، سوف نقوم بعرض بعض الأمثلة العملية لاستخدام flexbox في تصميم صفحات الويب، وكيفية تحسين تجربة المستخدم بفضل هذه الخاصية المذهلة.
إذا كنت مهتمًا بتحسين مهاراتك في تصميم صفحات الويب، فإن هذا الفيديو سيكون مفيدًا لك. تابعنا لمعرفة المزيد!
نعم، يمكن استخدام خاصية flexbox في تصميم صفحات الويب المتجاوبة بكل سهولة. في الواقع، تعتبر flexbox من الخصائص الأكثر استخدامًا في تصميم صفحات الويب المتجاوبة، حيث تسمح للمطورين بتحقيق تخطيطات مرنة وقابلة للتعديل بشكل سلس في جميع أحجام الشاشة.
باستخدام خاصية flexbox، يمكن تعيين العرض والارتفاع والمسافات بين العناصر بشكل مرن ودقيق في جميع قياسات الشاشة. كما يمكن تغيير ترتيب العناصر وتحديد مواقعها بناءً على أحجام الشاشة المختلفة.
وبالإضافة إلى ذلك، يمكن استخدام خاصية flexbox بشكل مشترك مع وسائط أخرى مثل media queries و grid layout لتحقيق تصميم متجاوب يتكيف مع جميع الأحجام والأجهزة.
لذا، إذا كنت تبحث عن طريقة سهلة وفعالة لتصميم صفحات الويب المتجاوبة، يمكنك الاعتماد على خاصية flexbox واستخدامها في تحقيق تخطيطات مرنة وجذابة في جميع أحجام الشاشة.
______________
توقيت الفيديو
00:00 هنعمل ايه
01:15 يعني ايه flexbox
02:10 تهيئة العمل
04:20 الفرق بين flex و block
05:15 display: inline-flex;
06:35 flex-direction
08:57 flex-wrap
11:07 flex-flow
11:40 justify-content
18:18 align-items and align-content
30:26 align-self
32:26 order
35:20 flex-grow
39:33 flex-shrink
42:57 flex-basis
45:01 flex
46:12 gap
46:55 wedding game

[@user-hc2pw7kn2o]

لو سمحت عازيين تكملة كورس cs50 انا متفهم ان المشاهدات عليه قليلة بس بجد هو مفيد جدا و غني بالمعلومات خصوصا مع اسلوب شرحك الي بيشرح لحد ميعرفش اي حاجه خالص عكس الي بيشرح من غير ما يتعمق تعمق شديد في الأساسيات و ده غلط لأن اهم مرحلة التأسيس الصح و عايز اقول لحضرك حاجه في موضع المشاهدات القليلة ده المفروض تاخد عدد المشاهدات مقياس نجاح للفيدو في حاله انك بتقدم محتوي ترفيهي لأنك وقتها مش هتكون مقيد بفئة معينه بس بتستهدف فيها فيديوهاتك (راغبين تعلم البرمجة) بل هتكون بتستهدف الناس كلها فأكيد مفيش وجه للمقارنة لما تقارن عدد الناس كلها بالمجتمع البرمجي و علي فكرة مش هو بس ده اي تخصص تاني منطقي يكون ناسه اقل بكتير من العامة و اي فيديو بيشرح لأي تخصص تأكد ان مشاهداته قليلة مش هتكون كثيرة ابدا غير فحال ان الفيديو يكون نازل بقاله سنين او شرح طفره معينه في المجال بتاعه

[@MohTaha-cc2df]

انا ادعمك من الجزائر بارك الله فيك

[@MohTaha-cc2df]

تم

[@MohTaha-cc2df]

تم

[@MohTaha-cc2df]

تم

[@MohTaha-cc2df]

تم

[@ahmadsaleem3118]

#husband {
display: flex;
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between
}
حال الاختبار الاخير لهاض الدرس
فعلا سفاح مشكوور

[@user-so1hr4pr2c]

ارجوك يا باش مهندس كمل كورس cs50
ولله حضرتك بتشرحو بطريقة روعة
ارجو استمر ولا تحرمنا من هذا الكورس

[@raachmhamed2233]

الله يبارك
بصراحة مظلوم يوتوبيا من افضل القنوات لي تشرح شرح دقيق وممتاز تستاهل 2 ملاين متابع

[@samah-suhaib]

دعني تقدم بجزيل الشكر لك نيابة عن كل ال١٠آلاف مشاهد الذين لم يبادروا حتى الى ضغط زر اللايك شكرا لك على هذا المجهود العظيم 🎉🤍🤍🤍

[@pandafreefire5942]

الله يرحم والديك تستحق على الاقل 3 مليون متابع شكرا لك و جزاك الله خيرا

[@ameerahalrshidi7268]

ماشاءالله من اجمل الشروحات الي شفتها بحياتي قناتك حرام ماتوصل مليون بس كلها مسألة وقت لان لكل مجتهد نصيب وانت اجتهدت جدا والارقام الي اشوفها بقناتك اشوفها ممتازه ومتفائلة انها بتوصل عدد كبير خلال مده اقصر من الي وصلو مليون بسنوات لك كل الاحترام والتقدير

[@norman3847]

واضح انك شخص تمتلك موهبة قويه في الشرح وإيصال المعلومات، الله يبارك فيك

[@mohamedgamal915]

جزاك الله خيرا على كورس ال cs50 واتمنى تكمله لانه يعتبر افضل كورس للمبتدئ برمجة شوفته لحد دلوقت
وهو السبب في اني قررت اكمل في تعلم المجال

[@HASSAN_ISP]

السلام عليكم ازيك يا مهندس عبدالرحمن كل عام وحضرتك بخير
ممكن بد اذن حضرتك تكمل كورسcs50 و جزاك الله خيراً ❤

[@sifoamama2673]

ماشاء الله استاذ عبد الرحمان ابدعت في الشرح رهيييب صراحة 🔥🔥🔥🔥
مشكوور جداا الله يجزاك خير

[@kralammar9421]

اتمنى انك تنزل عن cs50

[@positivemusic3723]

نتمني من حضرتك تعملنا كورس فلاتر flutter language لأن شرحك مشاء الله تبارك الرحمن كويس جدا
❤

[@Ali_creater]

مرحبا يا استاذي ...
بخصوص كورس CS50 متى باتنزل تكملته بديت معك ومنتظر لتكمله معك ❤️❤️🙏

[@hasanalihekal6904]

ما شاء الله شرح جميل وحرفيا متعوب فيه اوي ربنا يكرمك♥

[@user-ly7pc8gx5w]

كل سنه وانت طيب يا هندسة بعد ازنك متعملنا كورس ريأكت ❤

[@abdallaazzam907]

يا أخي حقيقي أحسن واحد شفته بيشرح على يوتيوب فى المحتوي العربي والإنجليزي طريقتك ممتازة فى تقسيم الموضوع لأصول وفروع وشرحك جميل ربنا وفقك فى ترتيب شرح الخصائص وحتي فى محتويات كل فيديو لوحده

[@aladdinwolf5033]

يا هندسه اتمني انك تكمل كورس cs50 لان الناس لاصة من بعدك,الكورس دا اهم من اي شي هتقدمه لان هو دا اللي هيحليك مميزو شكرا

[@alsayedali5412]

الحمد لله الذي علمنا ما لم نكن نعلم.. جزاك الله خيرا

[@hamdialiahmed8289]

بارك الله لك وانعم عليك من علمه وزادك علمً , ورزك لكل دعوه رزقً لا يعد ولا يحصا ... ربنا يجيزك خير ي غالي ع المجهود الي انت بتعمله .. .....

[@saifyaish19]

الله يجزاك خير ❤❤ فعلا انت ما قصرت الله يجعله في ميزان حسناتك

[@user-ku6rh3ob4w]

ما شاء الله عنك ي هندسة ربي يزيدك علم ورفعة ، متميز كعادتك ، كل التحية
ربي يقدرك يخو

[@mramzi7]

شرحك مشاء الله تبارك الرحمن كويس جدا ممكن لو تكرمت تعملنا كورس عن css respensive design

[@7HODA524]

ياريت ي هندسه تنزلنا دروس السليكتورز كمان ويبقي كدا جزاك الله كل خير + تسلم ايدك ع المحتوي والشرح الجميل البسيط دا والله ربنا يبارك ف حضرتك انت والبشمهندس اسامه الزيرو 🧡🧡🧡🧡🧡🧡

[@mramzi7]

انتظرت هذا الدرس طويلا شكرا جزيلا وعيد مبارك سعيد

[@palestine-mauritanie]

جزاك الله خيرا الرائع عبد الرحمن جمال
بارك الله لك وفيك ورحم الله والديك

[@user-gf7xb6ts8v]

بجد انت اكتر حد بفهم منه مشاء الله السهل الممتنع ❤️❤️

[@aBooal9DH]

جزاك الله خير ي استاذ جمال ي اخي والله شرحك رائع جدا استفدت منه كتير جدا ... ربنا يجعله في ميزان حسناتك ❤❤❤❤❤

[@lalalala-qm2ul]

اللهم إجعلها في ميزان حسناتك أخي.

[@user-vm3xz3ed1t]

شكرا من القلب على الابداع اللي تقدمه 🥰

[@user-wo1qw7ub8z]

ابداع في الشرح
احسنت استاذ

[@user-lr2hm1wt6c]

اكتر فيديو كنت مستنيه ❤️❤️❤️

[@wiamtaleb9597]

ماشاءالله استاذ عبدالرمن شرحك مميزز واسطوري استمر

[@abderrahimlaradji4169]

فيديو روعة ماشاء الله بارك الله فيك ربي يحفظك

[@mohmmadraji8049]

بارك الله فيك أخي الكريم .. انت رهيب جدا ما شااء الله عنك

[@manarabujundi9361]

أكثر من رائع ❤️❤️ أكثر من رائع صراحة ❤❤❤❤❤

[@lo_8rd]

بتعرف لو تعمل كورس css جديد يعني عشان القديم قديم😅, مش عايز اغير المصدر الي بتعلم عليه شرحك زي العسل والله

[@saramohamed5463]

شكرًا جدًا علي الحلقة دي ربنا يباركلك و يكرمك

[@laasriabderrahim7485]

ما شاء الله عليك ، نتمنى أنك تعمل لنا فيديو مثل هذا عن تجاوب الصفحة مع مختلف الأجهزة ولك الأجر بإذن الله

[@user-xt4lb2mo9f]

الشرح كان جدا ممتع ومحتوى الفيديو غني شكرا جدا على هذا الفيديو المتكامل ❤❤

[@khlodsaad363]

شكرا لمجهودك الله يكتبها في ميزان حسناتك 🤍

[@osamaeltorkey6196]

بسم الله ما شاء الله
ربنا يكرمك شرحك رائع

[@user-dq5ox2oy6j]

والله انت افضل استاذ مر عليا

[@hafiddz1503]

انت رجل يدخل للجنة باذن الله ميزان حسناتك ثقيل

[@blueberry5992]

Really missed ur videos, ur explanations. Actually I took CSS course but u are such an amazing person.❤

[@hamed_18_3]

علم ينتفع به
الله يوفقك

[@user-gn6xm9fv3u]

شكراا جزيلا استاذ و بارك الله فيك 😍

[@AsomyTraiget]

استمر يافنان متابعك من ليبيا

[@MwnMz]

كنت غانحلس التعلم بسباب هاد الدرس حيت بزاف ديال الناس معرفوش يشرحوه حتا جيت لعندك، شكرا استاد❤ 🇲🇦

[@mohammednagi1197]

واشكرك على شرحك الاكثر من مذهل

[@fayzaali5174]

بجد افضل حد فهمت منه

[@moulbymoulby2785]

شكرا على التحفه الفنيه لتعلم البرمجه موقع nouvil بالمناسبه اخوك من المغرب انتما المصريين اللهجه نتاعتكم اكثر من رائع بنحس في صوتكم حنيه ❤❤❤❤

[@akasm287]

يا باش مهندس بس عندي سؤال ألك كورس cs50 على قناتك خلص ولا ألو تكملة 🤔🤔

[@komzl647]

والله في وقتها ❤

[@khitemsbooks]

شكرا على الكورس ممتاز جدا جزاكم الله خيرا

[@user-qr8ye6hq1d]

جزاك الله خيرا

[@mohamedelarbiamzal7023]

اخي الكريم ياريت تعمل لنا كورس تحليل البيانات من البداية بارك الله فيك وجزاك الله خيرا وأنعم الله علينا با كورس تحليل البيانات من عندك با أسلوبك المميز

[@user-so5he3op1q]

بصراحة افضل شرح شفته مع اني اشتركت في كورسات مدفوعة لكن انت top

[@notreliberte8657]

شرح رائع فعلا

[@user-zo6jo9ip9z]

والله إنك إنسان أكثر من رائع، وشرحك فوق الوصف وباين إن الفيديو متعوب عليه.
أتمنى منك لو تسمح شرح لمادة الData Structure and Algorithms.
جزاك الله كل خير 🌹

[@user-xt4lb2mo9f]

ياخي اخوك من المغرب ومشكور جدا على المجهود والمحتوى الغني عن التعريف،ف شخصيا انا استفدت جدا من محتوى كورس ال CS50 خاصة واني ادرس لغة c في المدرسة فهو بمثابة مصدر قوي واساس لبناء كافة المفاهيم ناهيك عن فقرة ال data structure ،فاولا اعيد شكري لك جدآ على هذا المجهوم الجبار واتمنى ان تفكر ترجع لكمل كورس CS 50❤❤❤🎉

[@alamirsamir]

جاااااااامد جاااااااامد تسلم ايدك ❤❤

[@Second_Asites2354]

سلام عليكم
استاذ ممكن تعمل فيديو او سلسة عن تصميم موقع الكنروني كامل بالطريقة الصحيحة و تجنب الاخطاء وكتابة الاكواد بالشكل الصحيح وتقسيم الصفحة ووضع كل عنصر في مكانه المناسب بحيث اذا ازلنا عنصر معين من الصفحة لا تتثاثر العناصر الاخرى
وشكرا 😎😎😍😍

[@sadotheha3185]

ما شاء الله تبارك الله

[@hamdysefco5937]

بجد ماشاء الله اللهم بارك شرحك رائع ومن غير ملل، رجاءا عايزين كورس PHP أو كورس لمشروع كامل فرونت وباك زي موقع تجاره الكترونيه مثلا.

[@user-bh8db5jf4m]

يعطيك العافية يارب استمر

[@asallaeliwa644]

إبداع كده كده ❤❤❤

[@user-xt5wo8ct7v]

مشكور اخي❤

[@user-fw5kl9xh7o]

الله يسعدك ي استاذ عبد الله اخوك من اليمن اشكرك على مجهودك ولا تنسي cs50 كلنا ننتظرك ي استاذي

[@hebaamin3318]

ليه يابشمهندس بقيت تقصر معانا خلي دايما فى بالك ان ما انقطع عمل الا من ثلاث منهم علم ينتفع به يعنى الفديوهات دى هى لى هتشفعلك عند ربنا عشان احنا بنتعلم ونستفيد من حضرتك غير اى حد تانى على النت كله لا اجنبى ولا عربى حقيقي شرحك خيالى واحنا محتاجينك فارجوك كمل ومتسبناش فى نص الطريق لاننا بدانا معاك وعايزين نكمل معاك

[@redwanaitbenlarbi]

شكرا❤

[@foufou_ibr1595]

مشكور يباشا على الشرح

[@AhmedMahmoudMMD]

اللهم صل وسلم علي سيدنا محمد

[@ranaelazazy]

ممتاز يا م.غبدالرحمن..الحقيقه شرحك اكتر من رائع ..لو اهتميت بالقناه شويه ف تنويل المحتوي يعني القناه هتروح ف حته تانيه ان شاء الله عشان حقيقي تستاهل

[@Mahmood_Motawea]

شكرا جدا

[@streettalent7811]

Ty very mush for this video i was really helpful and the game was fun too t and really appreciated ❤

[@user-ku6rh3ob4w]

اللهم صل على النبي و على آله صلاة تحسن بها الأخلاق وتيسر بها الأرزاق

[@E4ourth]

يا باشا كنت اتابع قناتك من وقت طويل شروحاتك ممتازة بس ياريت لو تقدر تقسم الفيديو حقك على مراحل زي flex box ياريت لو خليته ثلاث فيديوهات افضل شي كان يصير علشان يتم استيعاب قدر بسيط

[@AhmedMohamed-id5tc]

عاش جدا ❤

[@moha_kunX]

thanks my brother that was helpful

[@adnanqasem5292]

رائع

[@saged1690]

ياريت حضرتك تكمل كورس cs50

[@user-xb1il6bf4t]

بجد عاش

[@user-ku6rh3ob4w]

بالتوفيق

[@palestine-mauritanie]

والله ما قصرت
صل على محمد

[@supermazen6989]

باقى كورس cs50 يا بشمهندس

[@user-bj4es5rl7g]

نتمني تكمل معانا كورس cs50 🥲

[@hesham9053]

كورس الcs50 يا غالي انت سبتني في نص الطريق مينفعش كده 😂😂

[@M0hamed-Anas]

ربنا يوفقك

[@AbdElHafidMechri]

great jooob broo thanksss

[@FouCha-tb4hg]

افتقدناك اخي الكريم طريقة شرحك غير مسبوقة ، الله يكرمك❤

[@abdulrazaqalhasan2269]

عاش 🌹🌹

[@Amazing-Videos-SNR]

very good thanks a lot😁

[@animegaza6284]

واخيرا ♥️♥️😍

[@lyndalouafi]

merci

[@user-zt7rs6kz9k]

ياليت تشرح الفرق بين
100px
100vh
100em

[@user-dz6yt8yq2r]

عاش

[@amineelkhaider4538]

the best of the the best

[@ahmedphon-8378]

يريت شرح ل Response ❤

[@soukainahajar4746]

كل واحد عنده مشكلة بالفليكس بوكس
أنصحك بالفيديو ده بشدة