شرح flex box

في هذا المقال إن شاء الله سوف نقوم بشرح ال flex أولا ماهي عبارة عن خاصية من خلالها تقوم بتوزيع العناصر الخاصة بك في الصفحة والتحكم بها بشكل مرن كانت تقام هذه العملية بال float ولكن فيها بعض المشاكل ومعقدة قليلا ولكن مع ظهور ال flex box أصبحت العملية أسهل بكتير أولا سنشبه ال flex بصندوق الصندوق هو الأب الأشياء التى داخل الصندوق هي الأبنا نقوم بتحريك الأشياء التي بداخل الصندوق يعني نمسكها يمكن نضعها في اليمين في اليسار في الوسط نعمل مسافة بيينهم هذا ما كنت أقصده بتوزيع العناصر في الصفحة للخروج ب layout إحترافي ومتجاوب
أولا لإستخدام ال flex سنقوم بكتابة html سنعمل الأب سيكون div بكلاس box كما أخبرتك فل تتخيل معي هذا div كصندوق والآ الأبناء ستكون عبارة عن div ستكون بكلاس item كلا موحد ونعمل لكل واحد كلاس one tow three for بنية بسيطة جدا: 

<div class="box">
    <div class="item one">1</div>
    <div class="item tow">2</div>
    <div class="item three">3</div>
    <div class="item for">4</div>
</div>
الآن لإستخدام ال flex سنعطي للأب هو div صاحب الكلاس box طريقة العرض ستكون flex يعني display flex هل رأيت صندوق سنضع أشياء بدون عرض وطول هكذا سنضيف في css لعمل مساحة لتحريك العناصر كما يظهر معكم في الكود وسنضيف للأبناء بعض التنسيقات لعرضهم يعني تنسيقات بسيطة وسنعمل هوامش بينهم لكي تكون العناصر الخاص بنا واضحة: 

.box {
    display: flex;
    width: 100%; 
    border: 1px solid #ccc;
    padding: 10px;
}
.item {
    padding: 20px;
    text-align: center;
    background: #f45;
    margin-left: 5px;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
}
1
2
3
4


كما ترون هكذا ظهرت العناصر الخاصة بنا داخل الصندوق جنبا إلى جنب عند إستخدام display flex ستظهر العناصر الخاصة بنا مصطفة والعكس بدون إستخدامها ستظهر على شكل عمود كما ترون الأمر بسيط جدا ولا يحتاج الكثير من النقاشات والتعقيد قلنا سابقا أن العناصر تظهر مصطفة ولكن يمكننا التحكم بهذا من خلال خاصية خاصة للأب إعتبر الخصائص مثل يدك وتقوم بتحريك العناصر بيدك وتحولها من صف إلى عمود ضروري ترتب الأشياء الخاصة بك في صندوق بدون تركها في فوضى: 

.box {
    flex-direction: column;
}


1
2
3
4


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

.box {
    flex-direction: row-reverse;
}
1
2
3
4

كما ترون ثم عكس الصف البدء من رقم أربعة بدل واحد فقط أعطيها قيمة row-reverse فستتم عملية العكس

نفس الشيء بالنسبة للصفوف يمكن عكسها بإعطائها قيمة column-reverse يعني بسيطة كما سيظهر معكم في الكود والنتيجة: 
.box {
    flex-direction: column-reverse;
}
1
2
3
4


كما هو ظاهر معكم نفس الشيء ولكن ثم العكس للعمود بدأ من رقم أربعة بدل واحد
الآن سنتعرف على الخاصية التي تمكننا من نقل العناصر الخاصة بنا من جهة x يعني نحرك الأشياء فقط لليمن والشمال بسيطة نعم إسم الخاصية justify-content لتحريك العناصر الخاصة بنا لجهة اليمين نعطيها قيمة flex-start: 

.box {
    justify-content: flex-start;
}
1
2
3
4

كما ترون لايوجد أي إختلاف لإنها من اليمين ولكن ستشهد الإختلاف عند تحريكها للجة الشمال لعمل ذلك نعطيها قيمة flex-end كما هو ظاهر معكم هنا في الكود والنتيجة: 

.box {
    justify-content: flex-end;
}
1
2
3
4

كما ترون أمسكنا العناصر بأيدينا وحركناها للجهة اليسرى داخل الصندوق إستمتعت أعجبتك ال flex
لآن سنمر إلى قيمة أخرى وهي كيفية توسيط العناصر بأيدينا داخل الصندوق سنعطيها قيمة center بسيطة وتتوسط معنا العناصر في المنتصف داخل الصندوق كما هو ظاهر في الكود والنتيجة: 

.box {
    justify-content: center;
}
1
2
3
4

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

.box {
    justify-content: space-between;
}
1
2
3
4

كما ترون بإستخدام قيمة ال space-between سوف يعمل مسافة بينهم
هنا عملنا مسافة فقط بين العناصر لم نعملها في الأول والأخير لذلك هناك قيمة يمكنها أن تأدي لنا المطلوب: 

.box {
    justify-content: space-around;
}
1
2
3
4

كما ترون عند إستخدام قيمة space-around سيعمل لك مسافة صغيرة في الأول أصغر من المسافة بين العناصر في حين المسافة بين العناصر متساوية
هنا لذينا قيمة شبيهة لها ولكن الإختلاف بينهم هو أن space-around تعمل لنا مسافة الأول والأخير ليست متساوية ولكن عند إستخدام هذه القيمة كل المسافات ستصبح متساوية: 

.box {
    justify-content: space-evenly;
}
1
2
3
4

كما ترون عند إستخدام space-evenly تصبح كل المسافات متساوية الآن إنتهينا من جهة x سنتجه إلى جهة y حيث نحرك العناصر أسفل وتحت بإستخدام خاصية align-items هنا لتوسيط العناصر من جهة y نعطيها قيمة center: 

.box {
    align-items: center;
}
1
2
3
4

كما ترون ثم توسيطها من جهة ال y
نفس الشيء فقط تغيير الإتجاه ملاحطة عند تغيير قيمة ال flex-direction مثلا إلى column سيتغير حتى طريقة عمل justify-content ستتحك في y بدل x نفس الشيء بالنسبة لل align-items
لن نذكر كل القيم الخاصة بال align-items لأنها نفس خصائص justify-content فقط تغيير الإتجاه إذا فهمت الألى ستفهم الثانية
الآن سنعمل خليط بينهم لتوسيط العنصر من x and y مع بسيطة: 

.box {
    align-items: center;
    justify-content: center;
}
1
2
3
4

كما ترون ثم التوسيط من كلا الجهتان أمر بسيط جدا
الآن سنتعرف على خاصية أخرى وهي تمكننا من عمل موقع متجاوب نعم تخيل معي فقط خيال يعني إذا أخدت أغراض من صندوق كبير إلى صندوق صغير طبعا ستخرج العناصر من الصندوق ولكن لو رجعت عنصر لتحت ستصبح ملائمة وهكذا لذينا هذه الخاصية إسمها flex-wrap القيمة الإفتراضية هي nowrap يعني لا ترجع إلى السطر ولكن إذا أردنها ترجع للسطر نعطيها قيمة wrap: 

.box {
    flex-wrap: wrap;
}
1
2
3
4

كما ترون رجعت إلى السطر لو لم نستخدم ستخرج خارج الصندوق لذينا شيء آخر يقوم بارجوع إلى السطر ولك يعكس ذلك كما هو ظاهر معكم في الكود والنتيجة: 

.box {
    flex-wrap: wrap-reverse;
}
1
2
3
4

كما ترون ثم العكس بنجاح
الآن سنتعرف على خصائص الأبناء سنتعرف على خاصية تمكننا من تكبير احد العناصر جعله ينمو أكتر من أشقائه كيف نستعمل خاصية flex-grow نعطيها قيمة رقمية يعني بكم سينمو كل م زاد الرقم زاد نمو العنصر: 

.three {
    flex-grow: 3;
}
1
2
3
4

كما ترون رقم 3 تمدد ثلات مرات أكثر من باقي اشقاء
لذينا خاصية أخرى عكسها تماما تقلص أوتجعل العنصر ينكمش : 

.three {
    flex-shrink: 3;
}
1
2
3
4

كما ترون تقلصت 3 بسيط سنتعرف على خاصية أخرى تغير لنا الترتيب خاصة بالأبناء بسيطة إسمها order نعطيها رقم الترتيب الذي سيأخده العنصر ستفهم كل شيء في الكود والنتيجة: 

.one {
    order: 2;
}
.tow {
    order: 3;
}
1
2
3
4

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

X:








1
2
3
4


Y:







1
2
3
4