جاري التحميل...
جاري التحميل...
التخطيط المرن الكامل + حل التوسيط الحديث
Flexbox (تخطيط صندوق مرن) هو نظام تخطيط CSS مصمم لترتيب العناصر بسهولة داخل حاوية واحدة، سواء أفقياً أو عمودياً، مع معالجة ذكية للمساحة المتاحة والفراغات.
يتم تفعيل Flexbox بإضافة display: flex إلى الحاوية. أي عناصر فرعية داخلها تصبح تلقائياً عناصر مرنة.
💡 ملاحظة مهمة:
يعمل Flexbox على محورين: المحور الرئيسي والمحور المتقاطع. اتجاه المحور الرئيسي يعتمد على قيمة flex-direction.
قبل Flexbox، كان ترتيب العناصر على صفحة ويب يعتمد على تقنيات قديمة ومعقدة. إليك الأسباب الرئيسية لاستخدام Flexbox:
قبل Flexbox، واجه المطورون مشاكل كثيرة في تخطيط صفحات الويب:
✅ المشكلة 1: التوسيط الصعب:
كان توسيط عنصر أفقياً وعمودياً يتطلب كوداً معقداً مع position و transform.
✅ المشكلة 2: أعمدة بارتفاع متساوٍ:
كان إنشاء أعمدة بارتفاع متساوٍ يتطلب display: table أو حسابات يدوية معقدة.
✅ المشكلة 3: العناصر العائمة:
استخدام float: left تسبب في مشاكل تدفق المحتوى ونقص clearfix hacks.
تخيل أن لديك صندوقاً (حاوية) بعدة كرات (عناصر) داخلها. يتيح لك Flexbox تحكم كامل في كيفية توزيع هذه الكرات داخل الصندوق:
💡 مفهوم أساسي:
الخصائص المضافة إلى الحاوية تتحكم في جميع العناصر الفرعية بشكل جماعي. الخصائص المضافة إلى عنصر محدد تتحكم فقط في سلوك ذلك العنصر.
عند تطبيق Flexbox على حاوية، يفعل محرك المتصفح ما يلي:
في Flexbox، أي محور يتحكم justify-content؟
ما الفرق بين flex: 1 و flex-grow: 1؟
أنشئ شريط تنقل بشعار على اليسار، وروابط في الوسط، وزر تسجيل دخول على اليمين. استخدم خصائص Flexbox لتحقيق هذا التخطيط.
الحل:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #1a1a2e;
color: white;
}
.navbar .logo {
font-size: 1.5rem;
font-weight: bold;
}
.navbar .nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.navbar .login-btn {
padding: 0.5rem 1.5rem;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}خصائص حاوية Flex:
display: flex - تفعيل Flexboxflex-direction - row | column | row-reverse | column-reverseflex-wrap - nowrap | wrap | wrap-reversejustify-content - flex-start | center | space-between | space-aroundalign-items - flex-start | center | stretch | baselinegap - المسافة بين العناصرخصائص عناصر Flex:
flex-grow - مقدار نمو العنصر نسبياًflex-shrink - مقدار تقلص العنصر عند عدم وجود مساحةflex-basis - الحجم الافتراضي قبل النمو/التقلصflex - اختصار: grow shrink basisalign-self - تجاوز align-items لعنصر واحدorder - تغيير الترتيب المرئي دون تغيير HTMLأنماط شائعة:
الطريقة القديمة مقابل Flexbox: