lecture12(flex css)

تمام، سنقوم بتنسيق النص بإضافة علامات الترقيم وفواصل الفقرات.

**النص المنسق:**

تمام، بدنا نأخذ اليوم اللي هو خاصية الديسبلاي فليكس. حكينا المرة اللي فاتت عن خاصية الديسبلاي وأخذنا فيها اللي هي البلوك والإن لاين بلوك إذا متذكرين، والإن لاين، صح ولا لا؟ اليوم حناخذ قيمة خامسة بتاخذها الديسبلاي اللي هي الفليكس.

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

بس شغلة مهمة إنه في الفليكس في عنا خصائص بتكون بتطبق على البيرنت وفي خصائص بتطبق على التشيلد. إيش يعني بيرنت؟ يعني بدي أشوف هدول العناصر مين الأبو تبعهم وأطبق عليهم ها الخصائص. وفي خصائص بتطبق على يعني على العنصر نفسه، مثلاً على نفسه، على الإيمج نفسها بطبقها.

أول حاجة حناخذ مثال بسيط، مثلاً يكون عندي سكشن وهذا السكشن بدي أحط فيه ثلاثة ديف، واحد مثلاً أرقام تكون اثنين، ثلاثة. هلقيت في الوضع الطبيعي كيف الديف بيجوا؟ على نفس السطر ولا تحت بعض؟ تحت بعض. تمام. بدي أجي بس هون على السريع أحط هايت وباك جراوند. حكينا في الوضع الطبيعي عمال ل في الوضع الطبيعي كيف الفاتيجوا؟ بيجوا تحت بعض. هلقيت لو أنا بدي أحطهم على نفس السطر حستخدم الديسبلاي فليكس.

هلقيت بال أول اللي بدنا نبدأ فيهم اللي هم الخصائص اللي بتطبق على الأبو، هو على البيرنت. فاول خاصية اللي هي ديسبلاي فليكس. لما أستخدم ديسبلاي فليكس معناته إنه أنا بخبر المتصفح إنه عملي ترتيب للعناصر على نفس السطر. هذه أول حاجة. فهون الفليكس مين حطبق هدول العناصر؟ مين الأبو لهم؟ مين الأبو لهم هدول؟ نعم، مين الأب اللي هدول الديف؟ السكشن. يبقى باجي على السكشن بقول له ديسبلاي فليكس. هن انتبهوا لترتيب الكارد مثلاً، أنا كنت كاتبة بال أول الديف، بس هلقيت اجت بدي أعمل شي على السكشن. الأحسن إني أحط السكشن قبل. الترتيب يعني بكون كويس عندكم.

لما أحكيله ديسبلاي فليكس، إيش بيعمل؟ بخلي المتصفح يخليلي العناصر على نفس السطر. شوفوا هليت الفرق كيف حيصير. تمام، اجوا العناصر مي على نفس السطح. هذه أول خاصية إن ديسبلاي فليكس بس بتخلي العناصر يجوا على نفس السطح.

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

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

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

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

لما أحكي له رو ريفيرس، رو ريفيرس حيكونوا العناصر موجودين على السطر اللي هو رو، لكن حيصير ريفيرس يعني يصير عكس لترتيب العناصر. حيصير أربعة ثلاثة اثنين واحد. هي نعمل ريفريش. شايفين إيش صار؟ صار ترتيب لـ تغيير اتجاه العناصر أربعة ثلاثة اثنين واحد.

لما أحكي له فليكس دايركشن كولوم، كولوم إيش معناتها؟ عمود، صح ولا لا؟ فصير ترتيب للعناصر بنظام أعمدة، يعني كل واحد في صف لحاله بهذا الشكل. هي واحد، اثنين، ثلاثة، أربعة.

لما أحكي له كولوم ريفيرس، على نفس العمود بس إيش بصير؟ من فوق بصير أربعة ثلاثة اثنين واحد. هي كولوم ريفيرس. حيصير نظام عمود، لكن العناصر حتكون أربعة ثلاثة اثنين واحد بهذا الشكل. تمام.

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

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

لما يكون الفليكس دايركشن رو، بتكون الجست فاي كونتنت بتتحكم بالعناصر اللي موجودين على الإكس أكسس، يعني بالناحية الأفقية. بنحكي عنها تحكم بالعناصر من الناحية الأفقية. لما يكون الدايركشن عندي كولوم، يعني أنا محددة الفليكس دايركشن كولوم، الجست فاي كونتنت الكولوم إيش معناتها؟ عمود. فبتصير الجست فاي كونتنت تتحكم بالعناصر بالاتجاه العمودي، مش اتجاه أفقي. يعني هذا برضه سؤال مهم إنه الفليكس كونتنت بتتحكم في العناصر على حسب مين؟ حسب الدايركشن. الاتجاه. إذا كان الدايركشن عندي رو، فهي بتتحكم في العناصر وبترتب بشكل أفقي. إذا كان الدايركشن عندي عمودي، بتتحكم فيه بشكل عمودي.

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

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

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

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

هلقيت الجست فاي كونتنت قلنا بتوزع العناصر بشكل أفقي إذا كان الدايركشن عندي رو، القيمة الديفولت لها فليكس ستارت. إيش يعني فليكس ستارت؟ إنه العناصر بتبدأ معي من هون. لأنه أنا بشتغل لغة إنجليزية، فتبدأ من جهة اليسار. هي تبعها. شايفين إيش صار؟ اجوا العناصر وراحت المسافات. هي الفليكس ستارت اللي هو الوضع الطبيعي.

لما أحكي له فليكس إند، بتصير العناصر تبدأ من هون. نهاية الصف اللي هو على جهة اليمين. لما أجي أحكي له هون فليكس إند، العناصر حتبدأ معي من جهة اليمين. لأنه هي الإند، النهاية تبعت الصفحة. شايفين الفرق؟ فليكس ستارت بتبدأ من هون. الفليكس إند بتبدأ من هـ. طبعاً هون عشان في عنا عناصر كثير، هي تقريباً النهاية بتكون ماخذ تقريباً المساحة. فكله بيرجع حسب برضه قديش العناصر الموجودين عندكم. فهذ بالنسبة للجست فاي كونتنت. الجست فاي كونتنت بتوزع لي العناصر يا أفقي يا عمودي حسب الدايركشن. اتجاه الصفحة. بتاخذ قيمة فليكس ستارت، إنه يبدأ العناصر من وين. الفولت تبعتها بتبدأ فيها. لو كان عندي أنا هون كنت محددة فليكس دايركشن كولوم. تمام. كيف الفليكس إند وين حتكون موجودة؟ أنا بشتغل هلقيت قلت له كيف حتبدأ تشتغل؟ هي الكـ حتبدأ من تحت، صح ولا لا؟ تمام. لأنه أنا قلت له فـ. هذا بالنسبة للجست فاي كونتنت.

في عندي الألاين آيتمز. إيش بتعمل؟ زي ما عندي جست فاي كونتنت بتوزع العناصر بشكل أفقي، على حسب اتجاه العناصر، بتوزع لي إياه بشكل عمودي. حسب الدايركشن. لما يكونش عندي رو، اللي هو الوضع الطبيعي، فبتكون الألاين آيتمز بتوزع لي العناصر بشكل عمودي. تمام. أنا عندي الدايركشن هو اللي رو. إيش يعني رو؟ يعني العناصر متصفة على نفس السطر. اجيت حكيت له الألاين آيتمز. هليت لما أورجيكم صور حتبين عندكم الفكرة أكثر. الألاين آيتمز يعني بترتب لي إياهم عمودي، فبتصير تتحكم باتجاه الصفحة من عمودي يطلع فوق، ينزل لتحت، بشكل عمودي. مش زي ما أنت شفتوا كان هون اجا هون. هي الصـ. لكن العمودي لو كان هون بينزل لتحت. وضحت لكم؟ وبتاخذ القيم نفس الحاجة. فليكس ستارت، وفليكس إند، وسنتر. لو بدي أوسطهم. لكن لو كان الدايركشن عندي كولوم، عمودي، فبتكون الألاين آيتمز هـ كيف حتتحكم فيها؟ بشكل أفقي. تمام. لأنه الأخـ العناصر موجودين هـ بشكل عمودي، فبتصير أو عفـ الكـشن بكون عمودي. لما تتحكم في العناصر بتصير تتحكم فيهم بشكل أفقي. نفس الحاجة. ألاين آيتمز ممكن تاخذ سبيس. خل أول حاجة ستارت. طبعاً هي القيمة حكيتها. فخلص خليني أحط. حينزل العناصر. يجوا العناصر هـ. لأنه ها النهاية تبعتـ. تمام. برضه ممكن أحكيله سبيس بتوين. بتعمل لي مسافة بينهم. نفس القيم بخـ دايركشن. بتوين. المفروض هـ هيك يصير مسافات بين هدول العناصر الأربعة والثلاثة واثنين. هـ بصير بينهم مسافات. ط مش مشكلة. عدي برع. بس وضحت الفكرة. إنحكم بالعناصر حسبـ. تبنا حاجة اسمها هـ. كل العناصر. أنا وين بطبق؟ بسـ. شن هوـ. رشـ. بتعمل راب. إيش معناتها؟ زياده. صح ولا لا؟ فـ الفليكس راب بتاخذ قيمة راب أو نو راب أو بتاخذ راب ريفيرس. عشان تتحكم لي بالزيادة تبعت العناصر. إيش يعني تتحكم في الزيادة؟ أنا هون عندي مثلاً أربع عناصر. لكن في عندي هون مساحة فاضية، صح ولا لا؟ فبص لما أضيف عناصر يجوا بالمساحة الفاضية ولا ينزلوا لتحت؟ بصير يجوا جنبها لأنه لسه في مساحة فاضية. كل ما في مساحة فاضية بتصير تضيف عناصر. هلقيت لما تخلص المساحة هادي بصير أنا أتحكم عن طريق الفليكس راب. بتاخذ قيمة نو راب، اللي هي القيمة الديفولت. لما أحكيله نو راب، يعني ما تنزلش سطر جدي. تخليهم كلهم على نفس السطر. هي معت نو راب. لما أحكيله راب، بمعنى إنه إذا المساحة خلصت، الـ ووف تبع الصفحة كله خلص، راب يعني الزيادة، خلي لي إياهم في سطر جديد لحال. لما أحكيله راب ريفيرس، بصيروا ينزلوا بسطر الجديد وـ ريفيرس. حكينا إيش بتعمل؟ بتعمل عكس للعناصر. يعني إذا كان مثلاً نزلوا هون ستة سبعة ثمانية تسعة، وأنا كنت مستخدمة راب ريفيرس، إيش حيصير؟ تسعة ثمانية سبعة ستة. زي هيك. تمام. طبعاً ها عشان تزبط حاجي هون أضيف كمان ديف خمسة. في الوضع الطبيعي أنا ما عملت فليكس راب. قلنا الوضع الطبيعي إيش القيمة تبعته؟ نو راب. صح ولا لا؟ نو راب يعني بضل على نفس السطر. بس إحنا هون عشان مستخدمين فليكس دايركشن، فخليها تكون مبينة الصه بهذا الشكل. هي كل العناصر اجوا معي على نفس السطر. فبير بحكيله هـ إن إذا خلصت المساحة، انزلي إياهم في سطر جديد. فبقول له فليكس راب راب. راب بصير كل ما في مساحة فاضية، إذا خلصت المساحة بصير ينزلوا سطر جديد. فسرا را القيمة الفـ نو راب. نو راب يعني تنزل سطر. خلي لي إياهم كلهم على نفس السطر. بدي إياهم ينزلوا بقله راب. شايفين الستة والسبعة اجوا نزلوا بسطر جديد. بدي إياهم يصير العكس. سبعة ستة. بحكيله هون راب ريفيرس. بصير ينزل سطر جديد مع إنه يعكس ترتيب العناصر. تمام. ها سبعة ستة صاروا فوق. وهاي الواحد اثنين ثلاثة. طبعاً مين تحكم؟ يعني هان الواحد واثنين وثلاثة ضلوا زي ما هم. صح ولا لا؟ ليش؟ لأنه أنا تحكمت بالفيرس بس في تعون الراب. هدول العناصر الأصلية اللي معمول لهم ديسبلاي فليكس بلهم ترتيب. لكن العناصر الزيادة هو اللي بصير لهم عكس في العناصر. يعني لو ضفت ثمانية تسعة، لأنه هم من ضمن اللي معمول لهم راب إنه ينزل سطر جديد، فبرضه بصير لهم الأوردر تبعهم، الترتيب بيختلف. واضحين لحتى الآن؟

طيب في عنا حاجة اسمها الجاب. الجاب هي تعتبر شورت كات، اختصار لخاصيتين جاب إكس وجاب واي. جاب بتعمل فجوة أو مسافة بين العناصر. لما أحكيله جاب إكس، يعني بتخلي لي المسافة هادي على محور الإكس أكسس. لما أحكيله جاب واي، بتخليهم على محور الواي أكسس. يعني أنا أحياناً بكون العناصر هادي بس بدي أعمل مسافة بالاتجاه الأفقي على الإكس أكسس، فبقول له بس جاب إكس. لو بدي المسافة للاثنتين، بستخدم الخاصية اللي هي شورت كات، اللي هي بتكون أصلاً اختصار. مش أخذنا كثير خصائص قبل، بتكون اختصار لأكثر من خاصية. فالجا لو أعطيتها قيمتين، إيش حتحسب؟ قيمة الإكس وقيمة الواي. صح ولا لا؟ لو أعطيتها قيمة واحدة، زي لما قلنا عن الباد والمارجن، لما بعطيه قيمة واحدة، حكينا بتعتبرها للقيمتين. هادي. لو قلت له مثلاً جاب 20 بكسل، فبتصير من جهة الإكس أكسس ومن جهة الواي أكسس تعمل لي المسافة الـ 20 بكسل هادي. المسافة اللي صارت. لو أنا بدي إياها بس من الناحية الأفقية، بحكيله جاب إكس. بدي إياها بس من الواي، بقول له جاب واي. والجاب بتاخذ عندي قيمة بالبكسل. بعطيها أي قيمة بالبكسل، زي ما كنا نحدد الباد والمارجن.

هذول كلهم العناصر وين طبقوا؟ على الفليكس بوكس تبع مين؟ البيرنت. الأب. نيجي هلقيت ناخذ العناصر اللي بطبقها على إيش؟ أطبقها مين هـ يعتبر؟ هم كلهم بشكل عام. الأولى، الثانية، أي وحدة فيهم تعتبر إيش؟ يعني أنه الأب هو السكشن. هو ماخذ بصير أتحكم في العناصر اللي بدي إياهم.

أول خاصية بدنا ناخذها هـ فليكس جرو. من اسمها فليكس جرو، إيش يعني؟ زيادة أو نمو للعنصر. بكون متى بستخدمها؟ أحياناً بكون في عندي عنصر ماخذ مساحة لعناصر. وأنا مش عارفة هذا العنصر قديش مساحته. لو أنا عارفة إنه هذا مثلاً 20 بكسل، بصير إذا هذا ماخذ ثلاثة، إيش أحكيله؟ 60 بكسل مثلاً. لكن أحياناً أنا بكون عاملة عنصر الفـ مثلاً ومش عارفة قديش مساحته بالضبط. أو مثلاً لو هو كان 100 بكسل الهايت والـ تبعه 100، بصير أحكي العنصر اللي ماخذ ثلاثة أضعاف وأحكيله 300، 300. صح ولا لا؟ بدل هالغلبة كلها، بجي بحكيله فليكس جرو. فليكس جرو بتاخذ مني رقم. هو القيمة الديفولت لها واحد. واحد إنه كل عنصر المساحة تبعه واحد، اللي هي مساحته الأصلية. الـ والـ تبعون أصليين. فليكس جرو بصير أحكيله إذا هو ماخذ ضعفين الحجم، إيش أحكيله؟ اثنين. فليكس جرو اثنين. لو ماخذ ثلاث أضعاف، فليكس جرو ثلاثة. زي هيك. بس الفليكس جرو مش حطبقها على الأب اللي هو السكشن. على مين حطبقها؟ على الديف الأصلية. يعني كل ديف لحال. يعني مثلاً لو أنا بدي أوصل لهذ الديف، كيف بوصل لها؟ حطيها هان كلاس. لأنه لسه ما اخذنا الإنت سلكتور عشان نوصل لـ مثلاً هادي الثلاث. بس أشوف ترها. تمام. هادي الثلاثة كانت ماخذة مساحة عنصرين. فعشان أميزها بس أعطيها كلاس مثلاً اسميه. وهذا الكلاس لما بدي أعمل عليه خصائص سي إس إس، كيف بدعيه؟ دوت اسم الكلاس. ممتاز. وهـ الترتيب برضه قلت لكم مهم بالكود. سكشن بال أول، بعدين الديف، بعدين باجي للديف الفرعية اللي ماخذة كلاس. عشان لما ترجعوا للكود تكون عندكم الشي أسهل. باجي بحكيله هـ. لما أحكيله فليكس جرو، بزيد لي حجم العناصر بقد إيش أنا بدي. مثلاً ثلاثة. فبعين ثلاث أضعاف الحجم الأصلي تبع العنصر. شايفين إيش صار في الثلاثة؟ زاد الحجم تبعها. طبعاً هون يمكن أنتم تلاحظوا إنه بس ما زاد ثلاثة بالضبط. ليش؟ لأنه في باي ديفولت في عندي عناصر موجودين على نفس السطر. فلو أنا بدي أعمل هذا الشي، بصير أحط بالعنصر هذا بس بس مثلاً عنصرين عشان أضمن إنه تاخذ هادي المساحة. أو بصير الفليكس جرو ليها اثنين. بتصير المساحة الـ. بس فكرتها إنه الفليكس جرو أتحكم في زيادة حجم العناصر. وهذا هلقيت إحنا حنطبقه بهذا المثال. اطلعوا على هذا السكشن. في عنا هادي الصورة. إذا بتلاحظوا ماخذة مساحة اثنتين. يعني عندي الصف الأول في صورتين، والصف الثاني في ثلاث صور. بس هادي الصورة ماخذة مساحة اثنين. فهون إيش بحكيله؟ فليكس جرو اثنين. بحكيله لهادي الصورة. واضحة هادي النقطة؟ تمام.

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

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

طيب هادي بتستخدم لي خاصية الجست فاي كونتنت. شوفوا الجست فاي كونتنت كيف جابها؟ جابها مرة أفقي ومرة عمودي. ليش؟ لأنه قلنا هي بتشتغل على حسب الدايركشن اللي عندي. إذا كان الدايركشن عندي بشكل صف، فهي ح تتحكم في العناصر بشكل أفقي. إذا أعطيتها فليكس ستارت، وين بيجي العنصر؟ بال أول. هي القيمة الديفولت. إنه أنا أول عنصر بنش بيجي معي من جهة اليسار. بدي أوسط العنصر سنتر. عشان توطي العنصر بشكل أفقي. وين العنصر بالاخر؟ طبعاً هـ لأنه عندي عنصر واحد. لو كان عندي أكثر من عناصر، بصير أتحكم فيـ. تمام. نفس الحاجة. لو أنا عندي العناصر كانوا عمودي. برضه بتتحكم. هـ كمان جاوع الطبيعي تبعـ. تتحكم فيه بشكل عمودي. إيش يعني الوـ الطبيعي عمودي؟ إذا كان فليكس دايركشن شـ هو رو. إذا كان لأنه الرو هي الديفولت. إذا كان الفليكس دايركشن رو، فالألاين آيتمز ح تتحكم فيهم بشكل عمودي. والجست فاي كونتنت بتتحكم فيهم بشكل أفقي. فهي الألاين آيتمز بيجوا العناصر هيك بشكل أعمدة. فليكس ستارت بيجي بال أول. سنتر بيجي بالنص. بشكل عمودي. يعني بيشتغل على طول الصف. ها معناته أفقي. بيشتغل على الـ عرض تبع الصفحة. فليكس إند بيجي معي بالاخر. تمام.

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

ثبتوا الألوان تبعته، مثلا مين كر، كر، في عندكم لون ثالث؟ يرد كر. عشان لو احتجته كثير بتصير تشتغلوا شغل وصاحب المشروع يقول لك مثلا غيرت اللوجو، غيرت الألوان، حتقعد يوم كامل بس تغيروا الألوان تبعت الموقع. فلا، أسهل لكم إنكم تكونوا مخزنين في الرك، أو مثلا حجم الخط. في عندي مجموعة من الخطوط، مثلا كعناوين ماخذة حجم خط 20 بكسل. برضه بدل ما أضل كل واحد أحط له 20 بكسل، ممكن هون أثبت القيمة. يعني بشكل عام المتغيرات حتستخدموها لما يكون في عندكم قيمة معينة متكررة مع أكثر من عنصر، حتستخدموها وعشان في حال إنكم احتجتوا إنكم تغيروها بتقدروا تغيروها.

طيب نيجي نحكي على آخر خاصية اللي هي خاصية الفلتر. في حد بيعرف لأيش خاصية الفلتر؟ اه تفضل. لأيش بستخدمها؟ وين حستخدمها الفلتر؟ واش كمان؟ والايقونات. فلتر حتستخدموها مع الفلتر والايقونات بس. تمام. الفلتر ايش بتعمل؟ بتخليني أتحكم في تأثير الصورة. عندي أكثر من قيمة. يعني خلينا ندرج صورة عشان أوريكم الفرق. [موسيقى] ممكن تعتم الصورة، ممكن تعمل ضباب على الصورة. بتاخذ أكثر من شيء. خلينا نيجي ه ننشئ إيج. برضه كثير بتستخدموها وخصوصا حتستخدموها كثير لما ناخذ السيدو كلاس. إن لما أعمل هوفر على العنصر، مثلا خلي لي الصورة هذه تتغير. فصيروا تستخدموها. مثلا هي هذه الصور بس حجمها كبير، بدي أغير حجمها على السريع. الحجم. تمام. ها الصورة وقمح اللي فوق بس عشان تكون الأمور الكم أوضح. هي الصورة اللي حنشتغل عليها. تمام. هل خاصية الفلتر أول حاجة بتتم تطبيقها على الأيقونات أو على الصور بس؟ غير هيك مش ح تستخدموها. مع حكينا بستخدمها عشان أتحكم في تأثير الصورة. هذه مثلا بدي الصورة كلها أبيض وأسود، أو الصورة نفسها بدي أعمل عليها شوية ضباب، بدي أعكس الصورة. رح نشوف ايش قيم اللي بتاخذها هلقيت. إحنا وصلنا هون للاج. ما زال بطبقها على الإيمج. يبقى حاجة على الإيمج نفسها وأعطيها خاصية الفلتر. فلتر أول قيمة بتاخذها جراي سكيل. جريي سكيل ايش بتعمل؟ بتخلي لي الصورة كلها أبيض وأسود. تمام. حتى أنا يمكن أجيب لكم صورة ثانية أحسن لأنه ها الصورة إذا بتلاحظوا قريبة كثير من أبيض وأسود. صح؟ فبدي أغير الصورة أحسن. شوف هذه. تمام. هذه الصورة حتعتبر أحسن. هلقيت أول حاجة الفلتر بقول له جراي سكيل. جريي سكيل عشان أنا كثير بتشوفوا في الموقع الصورة بتكون أبيض وأسود. مثلا أنا عندي صورة محتاجة تكون ك أبيض وأسود، لكن مش لاقية الصورة الأصلية تبعتها أبيض وأسود. فبج بقول له هون جريي سكيل. جريي سكيل بتستناش مني شيء بالبكسل. أجي أحكي له 20 بيكسل ولا 30 بيكسل. لا، بتستنى مني نسبة مئوية. يعني 90%، 80%. لما أحكي له 100% يعني كل الصورة خلي لي اياها أبيض وأسود. لكن بدي اياها مثلا أقل شوية بقول له 70%، 80%. بس المهم ما أحط بكسل. لازم أحط نسبة مئوية. فبج هون استخدمت فلتر جريي سكيل وباجي هون لو قلت له 100% ايش حيصير؟ كل الصورة حتكون معكم أبيض وأسود. شايفين؟ كل الصورة صارت لونها أبيض وأسود. بدي أتحكم فيها مثلا ممكن أقول له 80%. حتتغير شوي الصورة. ه 80%. شوفوا الفرق. هل لاحظتوا إن صار فر؟ تمام. فهذه هي الجرا سك. كثير كنت شوف كانوا يحطوا بالبكسل. مش ح تزبط معكم. يعني تيجي تقول لي هون 80 بكسل مش ح تزبط. تستنى مني نسبة مئوية. هذه أول قيمة للفلتر إنه جري سكيل. تستخدموها لو إنتم الصورة بدكم إياها أبيض وأسود.

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

ش كمان قيمة انرت اسمها الرت. تعكس الصورة بشكل كبير. الانفر عفوا مش ال الفرت والفر بتاخذ معاي قيمة نسبة ميه. مثلا أقول له 50%. الفرت تتعكس لي الصورة بشكل كبير. يعني حتى نادر صراحة ما نستخدمها لأنه بتغير معالم الصورة كليا. شايفين كيف صارت الفرت. يعني أنا كمان مستخدمة كثير. ممكن أخليها 10 بال. المهم هي بشكل عام إنه بتعكس ملامح الصورة كلها. ومش دايما بنستخدمها. بس أنا يعني حبيت أحكيلكم إياها. ها فيها شوية برضه من النوع إنها مغبشة. هذه هي قيمة الانفر. في عننا كمان ممكن أتحكم بالفلتر من ناحية الأوباي. وأخذنا قبل هيك الأوباي صح ولا لا؟ أتحكم بالأوي اللي هي الشفافية تبعتها. مثلا بدي إياها ث من أو 6 من. قلنا كل ما كان الرقم قريب من الواحد بتكون الصورة واضحة. صح ولا لا؟ ف 6 من هي الأباس حتكون شفافة نوعا ما. أو مش شفافة إنه فاتحة يعني شوية. تمام. هذه بالنسبة للفلتر. وقت ايش ح تستخدموها؟ مع الإيمج ومع الأيقونات. تمام.

طيب خلينا لسه في وقت معنا. بدنا نشتغل هذا التصميم. هذا اللي هو أصلا معكم تاسك اللي المفروض إنكم مسلمين يعني. بالنسبة للي فوق النافيجيشن بار. في حد عنده أي مشكلة فيه؟ لو النافيجيشن بار بدنا نفسه في نفسه. اه هذا سهل هسار النافيجيشن. لو عملتلهم ديسبلاي فليكس وجفا ك. لا أنا قلت لكم عادي يعني يفضل أصلا إني أشوف شيء مش زي كل واحد يعمل. هذا سي في لكم. فكل واحد يعمل اللي بده إياه. بس أنا بقول لو إنتم بدكم تشتغلوا هذا التصميم. النافيجيشن أتوقع صار سهل الكم. إنه أجي أعمل هدول في ديسبلاي فليكس. صح ولا لا؟ وأعملهم جفا ك. أو لو أنا بدي أستخدم اللا بلوك بس أخليهم على نفس السطر. وأجي أعمل أو مارجن بينهم عشان أعمل المسافات هذ. طيب السكشن الثاني برضه أخذناه. باك جراوند وجي بحط هدول. طب الخط الأبيض هذا كيف أعمله؟ ا ار. [موسيقى] موردر. ممتاز. ولما نجي ناخذ الأفتر حنعمله برضه بالافتر. طيب نيجي لل سكشن هذا. بدنا نشتغل هلقيت السكشن الثالث. والرا لا الرابع. حتى سهل. ممكن ما أشتغل. بس المهم بيهمني هذا السكشن. هذا الثال همني وهذا الخامس. تمام. نيجي نيجي لهذا السكشن. مين يحكي لي كاتش تي ام ال؟ أول حاجة ايش أعمل؟ حسح كل الموجود ونبدأ نشتغل مع بعض. وإذا ظل معنا وقت حخلي تطبقوا. مين معس خ يعمل هذا موجود ه؟ اه الماوس اللي هو ه علق. اه مش راضي يحدد. صار جي. اه شكله عشان هو هذا بده تنشيط. لا حضر لما أروح بنش. مش مشكلة. بس أنا بدي هلقيت أمشي حالك. خلص هي بعمل بال. [تصفيق] مل فكرة المشكلة بالشاشة مش بالماس. اه مش راضي يشتغل. خلص بتكون بالشاشة. يسلمك. بدك سؤال. شو اسمه الط ه عن طريق الـ ايه بتحط الاتش ريف تبعها. أخذوها بعي ما أخذناها بالضبط. حا بس هي بشكل عام عن طريق الـ اتش انت بتحط مساري الصفحة الموجود. بحكيلكم إياها عندنا. بس خليكم معي بالله. هلقيت حكينا بدنا نشتغل هذا السكشن. مين أول شي يشارك من الناس اللي ما سمعنا صوتهم؟ مين يشارك؟ لا هذا جاب كثير. غيره. مين حابب يشارك؟ هذا سهل هيه. اه أنت. يلا خلينا نشوف. أول حاجة حنعمل سكشن. صح ولا لا؟ بداخل هذا السكشن ايش أحط؟ ك لا يا شيخ. ديف واحدة. طيب يلا خليني أشوف. احكي لي ايش حتعمل؟ نعمل أول الشمال. تمام. نكتب فيه هذا الكلام. ممتاز. ونعطيك ل في عندك. خلينا نشتغل حده حده. تمام. أول حاجة عندي سكشن. اكم ديف في؟ وينهم؟ وين الثلاثة؟ خلي واحد يجاب. خليه هو هذا قصدك أحطه بديف. طيب ض الاثنين. مين اللي تحت هذا ديف قصدك؟ طيب خلينا نشتغل حده حده. أنا لما أشوف هذا السكشن أول حاجة حتخطر ببالي إنه في عندي ديفين بس. ديف على اليمين وديف على اليسار. حاجي ه. أجي أحكيله تو ديف. هي أول حاجة حأعملها عشان ما تتخربط إنه تصير عندكم كثير ديفات. لا بشتغل حده واحدة. وهون أنا دائما بحب أسمي للفات اللي على اليمين وعلى اليسار. كل واحدة أعطيها كلاس. الكلاس هذه اسميه ال ديف. والكلاس هذه اسميه ار ديف. اللي هو ليفت ديف ورايت ديف. عشان لما أصير أعمل عليهم خصائص أكون عارفة. فحاج هون على كل ديف أنا عملتها أعطيها كلاس. تمام. اللي على اليمين بحكيله ار ديف. اللي هو اختصار لرايت. وهذا [تصفيق] ال. وهذ الف. أحك. تمام. هبدأ نحكي إنه في ايش موجود عندي الكلام هذا. تمام. خليني أحطه مثلا كـ ش تي إم إل عادي. أي كلام أحط فيه. مثلا خليني آخذ هذا الكلام. بدي أنا أشتغل بالتفصيل. بس بدي أحكي الأشياء اللي ما أخذناها. ني على الار زي ما قلت حيكون فيها إيج. صح ولا لا؟ لهذا الكلام. وف لهذا الكلام. حتى ممكن الكلام اللي بال أول ما أحطه بديف. بس برضه خلينا نرتبهم أكثر. وأجي هذا أحطه داخل ديف. مثلا هذه الف فيها بي. خليني أحط جملة اللر. الف اللي بعده خليه نا. حنشتغل لحاله. أول حاجة حتخطر ببالكم. عندي مجموعة من الفات. كيف حجوا؟ حيوا تحت بعض. صح ولا كيف أخليهم على نفس السطر؟ فليكس لمين؟ الفليكس ه أطبقها. الاب. مش أنا عندي و هم جايين على نفس السطر؟ فبروح بدور على الاب تبعهم. هو السكشن. بس حشتغل أكثر من واحد. بدي أعطيه آيدي عشان يسهل علينا. مثلا الا ويدي. كيف أصل للعناصر ه؟ ممتاز. هاشتاج والاسم تبعهم. حا أحكيله السكشن الآيدي تبعه. أعمل لي عليه. الصور. مش حكينا الآيدي بستخدمه عن طريق الهاشتاج وبحط اسم الآيدي وبقول له هون ديسبلاي تكس. لما أقول له ديسبلاي فليكس. ايش حيعمل؟ حيخلي لي هدول العناصر موجودين على نفس السطر. بهذا الشكل. تمام. لسه أنا ما تحكمت جستي فاي كونتنت وهذه الأمور. أول حاجة اطلعوا لي على هذا السكشن. لو أنا عملت له جفا بتوين. ايش حيصير للعناصر؟ بس حيصير مسافة بين هدول العناصر. صح ولا لا؟ مش حيعطيني الشكل المطلوب. ايش بيخطر ببالكم ه؟ استخدم. ممكن الد على فكرة تبط. لا في ها مسافة. ها المسافة البيضا هذ تعتبر. بس في طريقة أسهل. ممكن أحدد العرض تبع كل ديف. صح ولا لا؟ ليش ليش هذا؟ أنتم ح تستخدموه ه. لأنه إذا بتلاحظوا ال ديف مساحته مش زي الار ديف. ال ديف كثير قليلة مساحته بالنسبة للار ديف. فانت ممكن ه يكون أسهل إني أحدد له الوث وخلص. مش كل ال عندي 100%. فممكن مثلا هذا أعطيه 30%. وهذه 70%. أو هذا 20%. وهذ 80%. ليش استخدمنا هي الطريقة؟ لأنه الدفات الموجودين ه مش نفس المسافة. فلما أنا بحكي له سبيس بتوين حيعمل لي مسافة بينهم بالضبط ويعطيني المسافة اللي بينهم واضحة. ها النقطة. فبصل لكلف وبحدد لها الوث تبعها. ه إحنا أعطينا كلف اللي هو الكلاس تبع. فبقدر أوصله عن طريق اسم الكلاس. هو دوت واسم الكلاس كان عننا. بحكيله ال تبعها مثلا خلي أقول 30%. بضل مساحة 70% لمين؟ لار. ال تبعها 70%. أنا بقول لكم بشرح كا أفكار. مش التصميم بالضبط. يعني أنتم لو بدكم تشتروا على التصميم بدكم تدقوا فيه أكثر وتشوفوا إيش موجود فوق. شفتوا إيش صار؟ صار المسافة هيك. خلص هون صار 30%. وهون 70%. نيجي هلقيت للشكل هذا. هلقيت هذا الشكل. في عنا تاج بالاتش تي إم إل اسمه بروجريس. بقدر أشتغل فيه. بس أنا بدي أعطيكم ليش بدي أعطيكم ها الطريقة. لأنه كثير لقدام حتشوفوا أشكال مرت عليكم. فعشان تعرفوا كيف أنا أحلل هذه الأشكال وأقدر أعملها. مين يحكي لي إيش ممكن يخط ب بالكم ه؟ ممكن نعمل هذا شكل البروجرس. هذا كيف ممكن أعمله؟ إيه؟ ممكن في الرينج. بس ممكن برضه طريقة ثانية. اه ممتاز. ممكن ه أعطيهم هون الديف حيكون أسهل شيء لك. لو بدي أعطيهم بوردر. مش حيطلع معي الشكل هذا بالضبط. يعني مش متخيلة شكل بوردر. حيكون مش حيكونوا متلاصقين مع بعض. إلا إذا عملت بوردر بدخل بوردر. بس هون أنا بحكي. اه أحسن طريقة ه إني أستخدم تو ديف. ديف بداخله ديف. الف اللي برا إيش ممكن ه ماخذ خصائص اللي هوكر. وماخذ هاي. وبوردر. أخذنا خاصية البوردر. إذا متذكرين. حكينا البوردر عشان تعمل لي زي انحناء للشكل الموجود. الأطراف تبعته. بعطيه خمس بكسل، لا بكسل حسب قديش بدي. ولو كنت بدي شكل دائرة بعطيه 50% في البور. فهذا الشكل عشان هو عبارة عن تو ديف. تمام. الدف الكبيرة هي اللي لونها رمادي. والدف اللي جو اللي بداخلها هذه اللي لونها أزرق. تمام. بتصير هذه أنا معطيتها كلها الوث 100%. اللي لونها أزرق. اللي بداخلها بصير أحدد الوث تبعها 95%. مثلا هون. هون حيكون 90%. زي هيك. وباك جراوند ر بكون بلون مختلف. تمام. هلقيت حنشتغل مع بعض. بس كفكرة إنه حيكونوا أصلا هم عبارة عن تو ديف. هون هم موجودين هون في الار ديف. خلصنا هذ الف نهايتها كانت تبعت البي. بدي أعمل ديف جديدة بداخلها ديف ثانية. طبعا هون الف أنا هذ الف كيف ممكن أصل. لس ما أخذنا برضه السلكتور. عشان أحكيلكم إياها. ممكن هذ أصلها. أقول له دوت أرديف الاند. أصل للديف ها. بس أنا بدي أحكيه عشان ما تتخربط. أسهل طريقة ه إني أعطيها كلاس خاص فيها. اسميها ب. نعم. بدنا نعمل اللي هو هذا الشكل. شكل البروس. شكله عبارة عن ت ديف. كل ديف ماخذ خصائص معينة. اجت طبقتهم هان. ممكن هان معطيتها كلاس. وأوصل عن طريق اسم الكلاس اللي هو ار. أجي أقله الثانية منه. بس لسه ما أخذنا السلكت. أخربط. عطيتها كلاس اسمه ه البس. هو مين الف اللي برا. اللي هي لونها رمادي. صح ولا لا؟ هي اللي حطبق عليها هذه الخصائص. حاجي أحكيله ه د اسم. وحكينا إيش الخصائص اللي ماخذها. اللي هو الهاي. الطول تبعها تقريبا 8 بكسل. خليني أحكي. وال و قديش بده يكون؟ 100% لأنه ماخذ كل المساحة. 100 [موسيقى] بال. وماخذ هو كان اللون. هو اللون الرمادي. باك جراوند كر. أو مثلا ها الأول. وايش كمان؟ حكينا ماخذ البوردر ريديس. بحدها برضه بوردر ريديس عشان تعمل لي زي انحناء للشكل. أو شكل الدائرة. بوردر ريديس مثلا ممكن يكون خمس بكسل. فهل حيعطينا الشكل اللي برا اللي لونه رمادي. بهذا الشكل. تمام. هلقيت بدي أعمل الف الموجودة بداخله. نفس الحاجة. بس إيش حغير؟ يقيف أصل له. نشتغل فيها. إيش أسهل طريقة إني أوصل؟ أعطيها اسم كلاس. هش أحكي هذه أنا بدي أوصل ه له. بس بدي أعطيها اسم كلاس. قمي بروجريس. اللي هو اسم الكلاس. الديف الموجودة بدخله. هذه معناتها إنه الديف الموجودة داخل البروجرس. لأنه بديش أنا تتعودوا إنه دائما كل شيء أعطيه كلاسات. لا. في أحيانا عناصر بقدر أوصل لها. ممتاز. بقدر أوصل لها بدون ما أعطيها اسم كلاس. إشارة الأكبر. دوت بروجرس. ولو ما كتبتها. لأنه ما عندكش إلا ديف واحدة. هذه معناتها كل الديف الموجودين بالبروجرس. ما فيش إلا هي واحدة. فبرضه حتشتغل. هلقيت هذه الف حطيها نفس الخصائص. بس حنغير مين؟ قلنا الكرا. هي الهاي. خليه برايكم الهاي حيكون نفسه ولا حغير فيه؟ حيكون نفس. عشان أضمن إنه مطابق مع بعض. 8 كسل. ه ال حيتغير. انتبهت. مثلا أقول له 80%. عشان يكون مبين الشكل أك. وبدي أعطيه بهذا اللون. ودر ريسل. اه مش راضي يعمل كوبي. بهذا الشكل. تمام. شفتوا كيف صار معكم؟ بتصير تكرروا هذا الشيء زي ما هو. طيب هذ لو بدكم تعملوا الاتش تي إم إل وال 95% كيف ح تشتغلها؟ ممكن بالفلوت. بس أنا بحب صراحة نستخدم ك الفلوت. لأنه أحيانا بتعمل لك مشاكل. لكن سهلة. هذ لو من الأشياء اللي اليوم أخذناها. ممكن أحطهم بديف. تمام. وأجي أعملها ديسبلاي فليكس. والمسافة هذه أقول له جفاي كو. حتيجي معكم ها المسافة. الفلوت بالمرة مش كويسة. قلنا بس بحالة واحدة بستخدمها. لما يكون عندي محتوى وصورة على نفس السطر. بس بعمل فلوت للصورة. الوم ما تمتها مرة. حست. لا أنا بس هي الطريقة الوحيدة بستخدمها. لأنه لقدامك حتى لو بدك تستخدم باد مارج فلس. مش ح تزبط معك. تمام. هذا السكشن في حد عنده أي مشكلة فيه؟ طيب السكشن اللي بعده أعتقد سهل. بدنا نشتغل بس. حد يحكي لي إيش نعمل فيه؟ تمام. ليش أرب؟ إحنا حكينا بال أول بدنا نشوف الدفات الأساسية. بعدين فرعية. اه تفضل. ممتاز. اللي هو حنعمل ال ديف وار ديف. في الارض إيش حتعمل؟ واحد حيا 30%. أو حتى كثير على 30%. 20%. حتيجي على كل ضف تعمل لها 30%. 30%. الدف الدف الأساسي اللي فوق. الدبين بديله مثلا يعمل كل. ممتاز. هذا اللي أصل بديش أروح. ليش؟ لو أنا احتجت أضيف كمان عنصر. حروح العب في النسب كلها. أصي أقول له 20%. 20%. لا ط أنا بقول من الأول 100%. على ثلاثة. بس اللي بدي أضيف عناصر. بقول له على أربعة. فه الم. هذه طريقة إنه أنت للديف أبو تعطيها و كلك 100%. على ممكن كمان تستخدم الفليكس تصفهم. والمسافات اللي بينهم بتعطيهم جاب. جاب هذا تو اشتغلناها. صح ولا لا؟ مش ح تعطيه جفاي كونتنت سبيس بتوين. لأنه حتلاقوا المسافات اللي بينهم صغيرة. حتصير. لأنه المساحة اللي عندي صغيرة. فبص بحدد له. بدي جاب مثلا 10 بكسل. 15 بكسل. عشان يعطيني هذا الشكل كله. ها صراحة مع المرونة. أنتم ح تصيروا زي هيك. كل شيء تعرفوه. بس في حد عنده مشكلة فيه هذا الشيء؟ كخدمة. ني لل سكشن هذا. إيش ممكن نعمل فيه؟ برضه سهل. الا تمام. خلينا نعملهم. عشان أنا بيهمني ه نستخدم الفلكس جرا. حعمل سكشن. وأعطيه آيدي ور. الايدي تبعه. وحكينا بكون في أسلا. في مشكلة ه. لو استخدمت نفس أسماء الكلاسات. في مشكلة لو خليتهم نفسهم ولا أغيرهم؟ ه كيف حصل؟ برضه كثير مهمة. أنا أحيانا ليش ممكن تستخدموها؟ أنت اطلعي هون. الال ديف والار ديف. كلهم على نفس المسافة. صح ولا لا؟ فممكن أنا هون أستخدم نفس اسم الكلاس. عشان لو بدي أعمل مثلا بادين ومارجن من جهة. بدل ما أروح على كل كلاس لحاله. بروح بقول كل الدف. حدد لي الباد والمارجن لهم. وهي حكيناها. أخذناها أول. يعني أول الكورس. إنه ق الموقع اشتغل على نفس التنصيص. نعم. لو بدي أشغل الموقع كله على نفس التنسيق. لاه. هذا اللي بحكي. ما أنت وقتش ح تعطي نفس أسماء الكلاسات. ح تعطيهم بس للأجزاء اللي لها نفس الخصائص مشتركة. وهذا الكلام حكيناه. بدل ما صير كل واحد أعطيه اسم كلاس له. فلا. أنا بح بوحد اسم كلاس واحد. بصير الخصائص هذه أعطيه إياها. تمام. هذا على فكرة كثير سهل الشغل. بس أنا عشان تعرفوا الفليكس زي هيك. تمام. هو زي هيك. هو وين البوينتر هذا؟ ممكن يكون ماوس كاسر على فكرة. بس دورت قبله. من أشكال الماوس كرسر. هذا حيكون بعثت أنا صورة. نظام الحركة. نظام الحركة حيكون شغل جي إس. هذا بتتحكم في الحركة. ت بس الشكل تبع. أنت أول شيء لازم تحدد. هذا لا شغل جي إس. برضه كيف أعمل الصور. هذا شغل جي إس. كيف تعملوه؟ بس إحنا ممكن بالهوفر. هذا لما ناخذ السي إس إس بالهوفر. نعمل له. أعمه سكيل أكبر. الحجم. ممتاز. أس بتصد أعمل له هوفر سكيل. بتكبر الحجم. ناخذها برضه. خلينا بس نشتغل هذا على السريع. حكينا سكشن. في السكشن هذا. تمام. الالف خلصي هجري. طيب إحنا لسه ما أخذنا الري. بدي أشتغلها فليكس. أنا هذه عاملاها جريد. بس أنا بدي أعملها فليكس. هلقيت إيش أعمل؟ بس خلينا حده واحدة بالله. حكينا بس الديف حيكون في ورس. خلص. ولا خلينا نعملها. عشان نعمل ديسبلاي فليكس. ويجي على نفس. والله ناخذه. خليكم شويه. جريد. ليش أنت بتحكم إنه جريد؟ لأنه عندي أكثر من عنصر على أكثر من صف. فصير أسهل علي إني أسح هريد. طيب هلقيت الديف الموجود. إذا بتلاحظوا هون. والله تعبت. خليكم شويه بس معي. حكينا إنه السكشن عن طريق الآيدي. بدي أستخدمه ه. هشر السجو. بداخله بجي بقله الآيدي اللي اسمه ور. الموجودة. طبعا تو هدول اشتغلنا. قلنا على السكشن الأساسي بب. عشان يجوا على نفس السطر. في حد عنده مشكلة فيهم؟ بس عشان أخليهم على نفس السطر. وه نفس الحاجة. أعطي كل واحد ال الخاصة فيه. ممكن أقله 6%. والارف 70%. ار ال تبعها 70%. بس هون عشان أخليهم يجوا معي على نفس السطر. اه المحتوى. صح. عشان هيك ما [تصفيق] اجاس غلبنا كثير. بس والله هذا كله جي إس. شي متعب صراحة. بالعكس الجي إس أسهل بكثير من السي إس إس. لاجوش. بس اطلع كيف إنه بدي جماليات الموقع بشكل صويع. ما هو هذا الأحلى. شغل الجي إس كثير أحلى من أحلى من ثابت. يعني اطلع كيف هذ الأشكال لو ثابت. اه كف الـ. خلي معي بس خمس دقائق. نخلص هذه النقطة. طيب اسمعوا. تشتغلو أنتم هلقيت هذا السكشن. بس عشان أعرف إذا حتعرفوا تستخدموا الفليكس جرو. ها الفكرة. بس بع دقائق. خلص. ماشي. بتقدر تمشي إذا بدك. معكم ع دقائق تشتغلوا هذا السكشن. سكشن ال وركس. يلا تفضل. بدل ما أنا كل شيء هذا هيك أحسن. يعطيكم العافية. بعد ما حكينا على خاصية الفليكس في هذا اللقاء. حأحكي شوية شغلات أدفانسد عن خاصية الفليكس. لازم تكونوا عارفينها. وبعدين حنطب إن شاء الله تطبيق بسيط. بحيث إنه نوضح الفليكس والخصائص اللي فيها. على السريع نعمل بس مراجعة. قلنا إنه خاصية الديسبلاي فليكس بستخدمها عشان أعمل توزيع وترتيب للعناصر في الصفحة. سواء كانت في صفحة الويب كاملة. أنا برتب وبوزع العناصر. أو في أقسام الصفحة نفسها. يعني الصفحة عندي فيها مجموعة من السكشن. بقدر كل سكشن أتحكم في الخصائص اللي موجودة فيه. وأوزع هذه العناصر الموجودة فيه عن طريق خاصية الفليكس. ففليكس تعتبر من أهم الخصائص في السي إس إس. حكينا إنه خاصية الفليكس بتاخذ خصائص لها علاقة في البيرنت اللي هو أبوها. وفي خصائص متعلقة في تشايلد. في تشايلد معناتها في النت نفسه. في العنصر نفسه. حنمر سريعا على الخصائص المتعلقة في الأب. قلنا أول خاصية منها فليكس دايركشن. طبعا كل الخصائص سواء البيرنت أو تشايلد. قبل ما أستخدمهم لازم أوصل للاب تبعهم وأعطيه ديسبلاي فليكس. على طول لما بحكي له ديسبلاي فليكس. معناته إنه أنا بخبر المتصفح إنه أنا بدي أستخدم خاصية الديسبلاي فليكس. وأوزع وأرتب العناصر على نفس السطر. لأنه شفنا ديسبلاي فليكس بتخلي لي العناصر على نفس السطر. وبعدين ببدا أتحكم في هذه العناصر. إذا بدي أعطيهم جاب. بدي أعطيهم دايركشن. وباقي الخصائص اللي حكينا فيهم. بس حنعمل في هذا اللقاء مراجعة بسيطة لهم. أول شيء قلنا الفليكس دايركشن. من الخصائص المتعلقة في الأب. وبتاخذ أكثر من قيمة. كمثال لو أنا عملت ديف أبو كبير ماخذ كلاس اسمه فليكس. بدل ما أكتب ديف كلاس فليكس. أخذنا في الاختصارات. بقدر أحكيله دوت فليكس. اللي هو دوت اسم الكلاس اللي أنا بدي إياه. مباشرة بنشئ لي وبيعطي كلاس اللي اسمه. هدول من ضمن الأبشن. الاختصارات. كمان مرة. لو أنا بدي أنشئ ديف وأعطيه كلاس. بدل ما أكتب دي كلاس والاسم هذا. بحكيله دوت. بعدين بكتب اسم الكلاس اللي هو فليكس. بعمل إنتر. هذا معناته وينشئ لي ديب أعطيه كلاس اسمه أفليكس. هذا أنا بدي أعتبره الأب. بدي أعطيها الات أبنا له. فبدي أعمل مجموعة من الف. وأعطيهم مثلا رقم. خلينا 1. بعدين ديف ثانية يكون فيها 2. وديف ثالثة يكون فيها 3. وديف رابعة يكون فيها ف. طبعا إحنا عارفين إنه الف عبارة عن بلوك المنت. فالآن لما أعمل ريفريش جوا الديف تحت بعض. فهي زي ما إحنا شايفين. مجموعة الديف اجوا كلهم تحت بعض. لأنهم بلوك المنت. الآن اللي بدنا نعمله إننا نستخدم خاصية الفليكس. أول حاجة بوصل. هلا هدول هم عبارة عن العناصر اللي بدي أعمل عليهم خاصية الفليكس. إني أخليهم على نفس السطر. فعشان أعمل هذا الكلام. لازم أوصل للاب اللي هو الكلاس اللي اسمه فليكس. الف اللي ماخذة كلاس اسمها فليكس. فجي هون على الستايل بحكيله دوت فليكس. هذه معناتها إنه الديف اللي ماخذة كلاس اسمه فليكس. لاني بدي أوزع العناصر فيها. فلازم أحكيله ديسبلاي فليكس. اللي هو الأب تبعهم. أعطيه ديسبلاي فليكس. أعمل ريفريش. زي ما إحنا شايفين اجوا العناصر هيهم على نفس السطر. بمجرد ما حكيت للاب تبعهم ديسبلاي فليكس. خلص بيفهم إنه وزع لي العناصر على نفس السطر. هلقيت بدي أتحكم بالدايركت تبعهم. بصير أوصل. طبعا إحنا قلنا فليكس دايركشن. من الخصائص اللي بتاخذها البيرة. فهل بحكيله فليكس دايركشن. وشفنا إيش القيم اللي بتاخذها. حسب أنا إيش بدي أوزع. رو. كول. روفيرس. ك ريفيس. حسب أنا إيش بدي. خليها رو ريفيرس مثلا. رو ريفيرس. بتصير الترتيب عندي 4 3 2 1. زي ما إحنا شايفين. وبجه الاتجاه تبعهم بالعكس. هذا طبعا إحنا شرحناه في اللقاء قبل. يعني بس قلت لكم الآن بعمل زي مراجعة بسيطة عليهم. ونحكي بعض الأشياء الأد فانس. من الأشياء الأد فانس بحكي لي إنه الديسبلاي فليكس بتاخذ الفول د تبع الصفحة. يعني بتاخذ العرض كامل. وما بتاخذ الفل هاي. عشان أشوف هذا الشيء وأطبقه معنا. لو أنا جيت هذا الفليكس أعطيته باك جراوند كر بهذا اللون. تمام. الآن أعمل ريفريش. حلاح إنه أخذ الفل د اللي هو العرض كامل تبع الصفحة. لكن ما أخذ الفل هاي. اللي هو الطول. إذا هذه معلومة مهمة لازم نعرفها. إنه الديسبلاي فليكس بتاخذ الفل و تبعت الصفحة. يعني بتاخذ عرض المتصفح بشكل كامل. لما هي أعطيته باك جراوند كلر. وما بتاخذ الفل هاي. وهينا شفناها في هذا الشيء. هذه أول معلومة بدي أحكي فيها. كمان شغلة إنه الفليكس بتتعامل إنها بتوزع العناصر على محور الاكس اكسس أو محور الواي اكسس. وهذا الشيء شفناه. إذا أنا بدي أتحكم في الاكس اكسس. مثلا بعطيه فليكس دايركشن رو. أو كولوم. إذا بدي أتحكم في الواي اكسس. مثلا بجي بعطيه فليكس دايركشن كولومن. كولومن بصير التحكم بالواي اكسس. هي واحد ا 3 4. زي ما إحنا شايفين. وأخذت برضه الفول و تبعت الصفحة. ما أخذت الفول هاي. يعني هي بقية الصفحة. بقية الفيو بورد ظل اللون تبعها أبيض. إذا هدول المعلومتين نعرفهم. إنه الفليكس بتوزع العناصر على محور الواي ااكس اك زي ما بدي. في دايركشن في اتجاه واحد بس. دايركشن يا إما كوم. اللي هو عمودي. أو الواي اكسس. أو الرو. اللي هو الاكس اكسس. المحور الاكس. أو المحور الأفقي. إذا أنا كنت محددة رو. أو رو ريفيرس. الشغلة الثانية. إنه خاصية الفليكس بتتعامل إنها بتاخذ الف تبعت الصفحة. وما بتاخذ الفل هاي تبعت الصفحة.

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

ثالث خاصية من الخصائص المتعلقة في الأب. هي الفليكس فلو. الفليكس فلو هي اختصار لخاصيتين. فليكس دايركشن وفليكس راب. يعني لو أنا بدي هذا العنصر الاتجاه تبعه رو. مثلا. وبدي الزيادة تكون راب. يعني الزيادة تتوزع في سطر جديد. باجي هون على الأب. بدل ما أكتب فليكس دايركشن في سطر. وأكتب الفليكس راب في سطر جديد. اجت خاصية مختصرة اسمها ففليكس فلو. فليكس فلو. وبتاخذ قيمتين. القيمة الأولى بتعبر عن الفليكس دايركشن. مثلا بدي إياها رو. يعني في سطر. والقيمة الثانية بتعبر عن الفليكس راب. مثلا أحكي له راب. هذه إيش معناتها؟ إنه وزع لي إياهم في سطر. أنا قلت له رو. والراب. يعني عمل لي الزيادة إنهم ينزلوا في سطر جديد. طبعا يعني ما فيش عندي زيادة لسه في تكملة للعناصر. فما توزع. متى حيكون؟ لو أنا هذا الديف معطيا هاي و مثلا. أوصل لهذا الديف وأعطيه هاي و. عشان يصير في عندي زيادة. كيف بوصل لهذا الديف؟ بجي بحكيله دوت فليكس. الديف اللي موجود في هذا. إيش معناتها؟ الديف اللي موجودين في الكلاس اللي اسمه فليكس. بس على السريع أعطيهم هاي مثلا 40 بكسل. و مثلا 40 كسل. وباك جراوند كلر صغيرة تكون لونها مثلا ريد. نعمل الآن ريفريش. زي ما إحنا شايفين. هي كل ديف من هدول أخذت هاي وو مقدارهم 40 بكسل 40 بكسل. وأعطتهم الباك جراوند كلر بهذا الشكل. الآن في زيادة عندي في العناصر. خلص. لأنه الهاي والو صاروا ماخذين حيز ومساحة من صفحة الويب. فاستخدم دمت. اللي هو خاصية الفليكس فلو. على الأب. بقارن. وعطيته خاصيتين. اللي هي الفليكس دايركشن والفليكس راب. عشان أحدد اللي بدي إياه. فبص هون في الفليكس فلو. حسب إيش القيم اللي بدي إياها. بحطها. بدي رو راب مثلا. رو راب ريفيرس. كومون. كومون راب. ريفيرس. كومون ريفيرس. حسب إيش بدي في الفليكس دايركشن. وإش بدي في الفليكس راب. فبص أحطهم في خاصية الفليكس فلو.

الخاصية اللي بعدها. جفاي كونتنت. قلنا جستي فاي كونتنت بتتحكم بالمين اكسس. اللي هو المحور الاكس اكسس. الافتراضي لها هي الاكس اكسس. ولكن الجستي فاي كونتن بتاخذ الخاصية حسب الرو والكولوم اللي أنا معطيه. إيش يعني هذا الكلام؟ حسب الفليكس دايركشن اللي أنا حددتها. إذا حددت الفليكس دايركشن رو. اللي هو صف. هو الوضع الافتراضي. بتصير الجستي فاي كونتن تتحكم بهذه العناصر بالاتجاه الرو. اللي هو الأفقي. الاكس اكسس. ولكن إذا كان الفليكس دايركشن ماخذ قيمة كولوم. بتصير الجستي فاي كونتن تتحكم فيه بشكل عمودي. اللي هو كومون. وطبقنا في أمثلة في اللقاء اللي قبله.

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

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

واحد فالين كونتنت ببين تاثيرها بس لما يكون عندي العناصر في اكثر من سطر. ايش يعني في اكثر من سطر؟ يعني عندي مجموعه من العناصر والمساحه تبعتهم ما توزعت في صف واحد، لا صار لها راب، صار في زيادة، فتوزعت في اكثر من سطر. فصارت اسمها ملتي لاينز. وين مهم جدا الالين كونتنت؟ مهم كثير لما اكون عامل فليكس راب ويكون عندي المحتوى هذا موجود في اكثر من سطر. فبتصير الانلاين كونتنت مهمة جدا اني اعمل محاذاة للمحتوى.

الانلاين كونتنت بتاخذ قيم: سترتش، بتاخذ فليكس ستارت، فليكس اند، سنتر، سبيس بتوين، سبيس اراوند. وحكيت في الشرح الأول كل واحدة ايش بتعمل. على السريع ممكن احكيلكم اياها: فليكس ستارت بتخلي لي كل المحتوى بالاول. الفليكس اند بتخلي كل المحتوى بالاخر. سنتر بتخليه بالوسط. سبيس بتوين بتعمل مسافات أو فراغات ما بين المحتوى. سبيس اراوند بتعمل مسافات أو فراغات حوالين المحتوى، مش بس بينهم، حوالين يعني من اليمين ومن اليسار.

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

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

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

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

الخاصية اللي بعدها من خصائص تشايلد اسمها فليكس بيسز. ايش يعني تشايلد؟ يعني اجي على ديف معينة واعطيها. يعني أنا هون عندي مجموعة من الـ. خلينا على أربعة ديف. واجي على الدف الأولى اعطيها كلاس اسمه 1، والدف الثانية اعطيها كلاس اسمه 2، والدف الثالثة اعطيها كلاس اسمه 3 مثلا، وهذه الدف اعطيها كلاس اسمه فور. تمام؟ ليش عملت هذا الكلام؟ عشان لما بدي على ديف معين اعمل الشي أوصل لها في الاسم الكلاس تبعها. دوت 2، دوت 3 وهكذا. فالان مثلا أطبق على أميز اللي هي رقم اثنين. كيف أوصل لهذا الديف؟ الوصول الصحيح لها اني احكي له دوت فليكس دوت 2. يعني اللي ماخذ الكلاس ف والي ماخذ كلاس ف. فجي هون بحكيله د فس. طبعا ه لما قلتله د ف هذ معناتها كل ال ماخذين الكلاس اسمه ف وطبقت على كل العناصر اللي موجودين. الان بدي احكيله واميزها فيك جراوند بهذا اللون عشان يكون شغلنا عليها اللي هي هذه رقم اثنين. تمام؟ اذا وصلت للديف الثانية وميزتها في الباك جراوند كر هذه.

في عندنا خاصيه اسمها فليكس بيسز. الفليكس بيسز بستخدمها مع التشاد، مع الابناء، مع العنصر نفسه. الف الفليكس بيسز بستخدمها عشان اوزع ابعاد وحجم العنصر بطريقة تكون اوتوماتيكيه. وهون بتغني اني اعطي د لهذا العنصر. ايش يعني هذا الكلام؟ يعني أنا هذه الديف اللي ماخذه كلاص اسمها 2 بدل ما اجي احكي لها بدي دث مثلا 30 بكسل ولا و 40 بكسل باجي بعطيها فليكس بيسز. تمام؟ باجي بعطيها فليكس بيسز وبعطيها أي قيمة. مثلا فليكس بيسز اثنين. هان بعطيها رقم. الفليكس بيسز هان ايش معناتها؟ بتصير تعتبر الود العرض تبع الايتمز هذا أو تبع تشلدرن هذا. بتروح بتحدد الحجم الافتراضي للعناصر حسب فليكس ايتم. يعني الان اعمل ريفريش. ال تبعه ما حسيت في تغيير. اجي احكي له فليكس بيسز عه مثلا. اعمل ريفريش. برضو لا ما حسيت في تغيير. طيب اجي احكيله فليكس بيسز مثلا 30 كسل. لا هي اصلا باي ديف 40. يبقى خليها 60 بكسل. نعمل ريفريش. شفنا ايش صار؟ ال تبع العنصر نفسه تغير حجمه. العرض تبعه تغير حجمه. ففليكس بيسز يعني وين حتكون مهمة؟ يعني حدا حيجي يحكي لي طب ما بجي بعطيه د 60 بكسل و 60 بكسل. صح ومضبوط و 100% وامحي الفليكس بيسز ونعمل ريفريش. هي ريفريش. ما حسيتش انه في اختلاف تقريبا نفس الو. خلص أنا قلت له و 60 بكسل هي نفسها لما بحكي له فليكس بيس 60 بكسل. لكن وين حتكون بتفرق؟ انه أنا مستخدمة هون خصائص الفليكس. فبتصير توزع لي العرض تبع هذا العنصر على حسب العرض تبع الايتمز أو العناصر اللي ماخذه فليكس. بيكون لها تاثير على الفليكس تشيلدرن باي ديفولت افتراضية. خلص بتصير تاثر على العرض تبع باقي العناصر. اعمل ريفريش وجربوها بنفسكم. مش حتلاحظوا فرق. يعني هذه الفليكس بيسز هي نفسها خاصيه الوتس للعنصر. لكن الأصح طالما أنا مستخدمة فليكس للعناصر وبدي عنصر معين أعطيه د غير عن باقي العناصر، فبستن فليكس بيسز وبعطيه القيمة اللي بدي اياها. طبعا بكسل بعطيه 100% مثلا. احكي له فليكس بيسس 30% اعمل ريفريش. العرض هلقيت حيتغير لأنه قلت له 30% من عرض العناصر. هي تغير العنصر. بقدر أعطيه مثلا ثلاثة ريم حسب وحدات القياس اللي اخذناهم. ثلاثة ريم. هي ريفريش. العرض صار مختلف لأنه قلنا الرم بتاثر في شيء ثاني. ثلاثة اي ام مثلا. اعمل ريفريش. الحجم تبعه حيتغير. حكينا الواحد ريم والواحد اي ام عبارة عن 16 بكسل. بدي ازيد مثلا بقول له خمسة اي ام. اعمل ريفريش. هي تغير عندي العنصر. بس الفكرة أكون عارفة انه الفليكس بيسز بمثابة الوث تبع هذا العنصر.

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

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

هلا بعد ما حكينا بشكل عام عن خصائص الفليكس سواء البيرنت والتشاد. في برضه معلومة بدي أحكي فيها. أنه في عندي أكثر من طريقة لتوسيط عنصر معين باستخدام الفليكس. يعني عندي عنصر مثلا ديف. عندي عنصر بي مثلا. وبدي أواسط هذا العنصر. ففي عندي أكثر من طريقة عشان أواسط هذه العناصر. في عننا ثلاث طرق. طبعا توسيط العناصر بشكل عام أكثر من طريقة. ولكن أنا اللي هلا بحكي فيها أنه ثلاث طرق استخدم الفليكس في توسيط العناصر. خلينا نطبقها ه. أنه عندي هذا الدف الاب في الابناء اللي هم 1، 2، 3، 4. وبدي أوصفهم. باجي هون على الستايل. طبعا حذف كل اشي. بس نخلي هذا الشي الأساسي اللي كنا عارفينه. اليونس ايش موجود فيها؟ بحكي لي الطريقة الأولى لتوسيط العناصر باستخدام الفليكس. أنه استخدم على الاب ديبلا فلكس جفا ك سنتر سنتر. فهيك بواسط العناصر فيه. يعني لو أنا بدي آخذ مثال. خليني أحذف هذا الكلام بس وأعمل ديف بسيطة. ديف فيها جملة اللور مثلا. تمام؟ ف الوضع الافتراضي حتيجي من اليسار لليمين. كلنا عارفين. بس على السريع أعطي هذ الف باك جراوند كر لون أحمر. وهاي 100 بكسل و 100 كسل. هي شكل الف حيكون معي بهذا الشكل. تمام؟ هذا الف لو أنا بدي أواصله باستخدام الفليكس. بحكي لي أنه أنا حكينا أنه الفليكس بستخدمها على الابناء. على الاب عفوا. أنا هون مين هو الدف؟ هو عبارة عن العنصر نفسه. فبدي أروح أعمله داخل اب له تابع له. فامسك هذه الدف وأعملها داخل الف الاب اللي اسمه افليكس. فصارت هذه الف الاب تبعها هو الف اللي ماخذ كلاس فليك. فجي ه على ال د بعطيه ستفا كنت. لأنه احنا قلنا الجفا كن بطبق على الاب. هوف. فلو قلت له جفا سنتر سنتر. لأنه ه توسيط حيكون على محور الاكس اكس الأفقي. على محور العمودي الواي. فاعمل فرش. الان المفروض ال تيجي بالنص. ثواني شويه. المفروض هدول كست نفس. أنا بدي أواسط الف. لأنه أنا بدي أواسط الف نفسه. صح. اعملش لابط.