فليكسبوكس هي واحدة من أقوى ومرنة أدوات كس لخلق مجموعة متنوعة من تخطيطات. يسمح لك بالتحكم بسهولة في تخطيط العناصر على الصفحة وتكييفها مع أحجام الشاشة المختلفة-مما يجعلها أداة مثالية لإنشاء جداول مرنة.
المبدأ الأساسي للفلكس بوكس هو أنه يوزع المساحة المتاحة بناء على قواعد المحاذاة المحددة ويرتب العناصر داخل الحاوية أفقيا أو رأسيا. وهذا يجعل على الفور فليكسبوكس أداة عظيمة لخلق الجداول.
لبدء العمل مع فليكسبوكس ، وهو ما يكفي لإنشاء حاوية التي سوف تحتوي على جميع عناصر الجدول. للقيام بذلك ، استخدم علامة ديف مع الفئة المحددة. ثم يتم وضع جميع عناصر الجدول داخل هذه الحاوية باستخدام علامات ديف أو أي عناصر أخرى غير الدلالية. يتم تعيين كل عنصر فئة من شأنها أن تسمح لك لأسلوب ذلك والسيطرة على موقعها.
الخلية 1
- الخلية 2
- هيكل الجدول مع فليكس
- المزايا الرئيسية لاستخدام فليكس لجدول
- تكوين مرونة الجدول باستخدام فليكس-تنمو و فليكس-يتقلص
- ضبط المسافة بين عناصر الجدول باستخدام الفجوة المرنة
- محاذاة المحتوى في الخلايا باستخدام محاذاة العناصر وتبرير المحتوى
مثال على إنشاء جدول مرن باستخدام فليكس
سؤال وجواب
ما هي الخصائص التي يمكن استخدامها لإدارة جدول مرن?
كيف يمكنني محاذاة عناصر جدول مرن في المركز?
في جدول باستخدام فليكسبوكس ، كل عنصر الجدول هو عادة صف. يتم ترتيب الصفوف أفقيا وتتكون من خلايا تسمى الأعمدة. يحتوي كل عمود عادة على محتويات الجدول ، مثل النص أو العناصر الأخرى.
باستخدام فليكسبوكس ، ونحن إنشاء حاوية الجدول ، وهو العنصر الأصل لجميع الصفوف والأعمدة من الجدول. وضعنا
العرض: فليكس ؛ الملكية إلى الحاوية
لتمكين استخدام فليكسبوكس.
بعد ذلك ، قم بإنشاء صفوف داخل حاوية الجدول. كل صف هو عنصر قائمة منفصل ، يتم تحديده عادة باستخدام علامة
- أو.
- داخل كل صف ، يتم إنشاء الأعمدة باستخدام علامة
- . يمكن أن يحتوي كل عمود على محتويات جدول ، مثل النص أو عناصر هتمل الأخرى.
- تقوم الحاوية المرنة تلقائيا بتخصيص المساحة المتاحة بين صفوف وأعمدة الجدول بناء على معلمات المحاذاة والتمدد المحددة في خصائص فليكس بوكس. يتيح لك ذلك تخصيص مظهر الجدول بمرونة ووضع المحتويات في الأماكن الصحيحة.
- هذا الهيكل الجدول باستخدام فليكسبوكس يسمح لك لخلق تصميم مرن وسهولة تغييره إذا لزم الأمر.
المزايا الرئيسية لاستخدام فليكس لجدول
يعد استخدام نموذج فليكس بوكس أحد أكثر الطرق فعالية لإنشاء جدول مرن على صفحة الويب. توفر هذه الطريقة عددا من المزايا:
القدرة على التكيف: باستخدام فليكسبوكس ، يمكنك إنشاء جدول التكيف التي سيتم عرضها بشكل صحيح على الأجهزة والشاشات المختلفة. هذا مفيد بشكل خاص للأجهزة المحمولة حيث تكون المساحة محدودة.
المرونة: فليكسبوكس يجعل من السهل للسيطرة على توزيع العناصر داخل الجدول. باستخدامه ، يمكنك ببساطة تغيير الترتيب والمحاذاة والهوامش وأحجام الخلايا. هذا يجعل من السهل إنشاء تخطيطات وأنماط مختلفة للجدول.
سهولة الاستخدام: فليكس بوكس يوفر طريقة بسيطة وبديهية لوضع العناصر داخل الجدول. يتم تعيين جميع الإعدادات باستخدام العديد من خصائص كس ، مما يجعل التعليمات البرمجية أكثر قابلية للقراءة ويجعل من الأسهل للحفاظ على وتغيير في المستقبل.
توفير الوقت: بفضل فليكسبوكس ، يمكنك تقليل كبير في كمية من التعليمات البرمجية اللازمة لإنشاء وأسلوب جدول. هذا يبسط التطوير ويسمح لك بالتركيز على جوانب أخرى من المشروع.
التوافق: ويدعم فليكسبوكس على نطاق واسع من قبل المتصفحات الحديثة ، والتي تضمن توافق الجدول على مختلف المنصات والأجهزة. وبالإضافة إلى ذلك ، هناك بوليفيلز التي تسمح لك لاستخدام فليكسبوكس في الإصدارات القديمة من المتصفحات.
استخدام فليكسبوكس لإنشاء ونمط جدول يحسن بشكل كبير من تجربة المستخدم ، مما يجعل الجدول أكثر مرونة والتكيف. كما أنه يساعد على تحسين الأداء ويبسط صيانة الموقع وتطويره. وفي الوقت نفسه ، فإن الميزة الرئيسية ل فليكسبوكس هو قدرته على خلق تصميم الجدول فعالة وجميلة من شأنها جذب انتباه المستخدمين وجعل استخدام الجدول أكثر ملاءمة وممتعة.
رمز المغلق:
.الجدول {
عرض: فليكس;
الاتجاه المرن: العمود;
}
.صف {
عرض: فليكس;
| تبرير-المحتوى: المسافة-بين; | } | تكوين مرونة الجدول باستخدام فليكس-تنمو و فليكس-يتقلص |
فليكس تنمو و فليكس يتقلص هما الخصائص التي تسمح لك لتخصيص مرونة العناصر داخل حاوية باستخدام فليكس بوكس.
تحدد خاصية النمو المرن كيفية امتداد العنصر داخل الحاوية. تشير قيمة الخاصية إلى مقدار المساحة الخالية في الحاوية التي سيشغلها العنصر. على سبيل المثال ، إذا قمت بتعيين عنصر إلى فليكس-تنمو: 1 ، وسوف يستغرق كل المساحة الحرة ، إذا كانت قيمته فليكس-تنمو: 2 ، وسوف يستغرق جزأين متساويين من المساحة الحرة.
تحدد خاصية الانكماش المرن كيفية تقلص العنصر داخل الحاوية إذا لم تكن هناك مساحة كافية. تشير قيمة الخاصية إلى المعامل الذي سيتم ضغط العنصر به. على سبيل المثال ، إذا قمت بتعيين عنصر على فليكس-يتقلص: 1 ، فسوف يتقلص بكسر متساو مع عناصر أخرى. إذا كانت قيمته فليكس يتقلص: 2 ، وسوف يتقلص مرتين بقدر العناصر الأخرى.
يوجد أدناه مثال على جدول حيث يتم تكوين كل خلية باستخدام خصائص النمو المرن والانكماش المرن:
الخلية 1
الخلية 2
الخلية 3
في هذا المثال ، تحتوي كل خلية في الجدول على قيمتي النمو المرن: 1 والانكماش المرن: 1. هذا يعني أن كل خلية ستمتد وتتقلص بالتساوي داخل الحاوية.
ضبط المسافة بين عناصر الجدول باستخدام الفجوة المرنة
في كس ، تسمح لك خاصية فليكس جاب بتعيين المسافة بين العناصر في جدول مرن تم إنشاؤه باستخدام فليكس بوكس. تتيح لك هذه الخاصية التحكم في الهوامش بين العناصر وتجعل الجدول أكثر قابلية للقراءة والفهم للمستخدمين.
لتعيين المسافة بين عناصر الجدول باستخدام فليكس الفجوة ، تحتاج إلى تطبيق التعليمات البرمجية كس التالية إلى الحاوية الأصل من الجدول:
.الجدول الحاويات {
فليكس التفاف: التفاف;
الفجوة: 10 بكسل;
}
- أين .حاوية الجدول هي فئة الحاوية الأصلية للجدول ، الفجوة هي قيمة المسافة بين العناصر ، في هذه الحالة 10 بكسل.
- وبالتالي ، فإن تطبيق خاصية الفجوة المرنة على الحاوية الأصلية للجدول يسمح لك بإنشاء جدول مرن بمساحة محددة بين العناصر. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، عند إنشاء شبكة لموقع إخباري أو قائمة بالمنتجات ، حيث يلزم وجود انحراف معين بين عناصر الجدول.
- من المهم ملاحظة أن خاصية فليكس جاب تعمل فقط مع العناصر التي تم تعيينها باستخدام فليكس بوكس ، ولا تعمل مع الجداول التقليدية التي تم إنشاؤها باستخدام علامة
- . لذلك ، يتم تبرير استخدامه فقط عند إنشاء جداول مرنة باستخدام فليكسبوكس.
- محاذاة المحتوى في الخلايا باستخدام محاذاة العناصر وتبرير المحتوى
لإنشاء جدول مرن باستخدام فليكس بوكس ، من المهم أن تكون قادرا على محاذاة المحتويات في الخلايا بشكل صحيح. للقيام بذلك ، يمكننا استخدام خاصيتين: محاذاة العناصر وتبرير المحتوى.
- تقوم خاصية محاذاة العناصر بتعيين المحاذاة الرأسية. يمكنك الاختيار من بين القيم التالية:
- فليكس - بداية-محاذاة على طول الحافة العلوية
- محاذاة فليكس نهاية القاع
- مركز-مركز المحاذاة
- خط الأساس-المحاذاة على طول خط الأساس للنص
تمتد-تمتد العناصر لملء ارتفاع الخلية
تحدد خاصية تبرير المحتوى المحاذاة الأفقية. القيم التالية متاحة أيضا لذلك:
فليكس - بداية-محاذاة اليسار
محاذاة فليكس نهاية اليمين
مركز-مركز المحاذاة
توزيع الفضاء بين موحد للعناصر عبر عرض الخلية مع نفس الفجوات بينهما
توزيع موحد حول الفضاء للعناصر عبر عرض الخلية بنفس الفواصل الزمنية قبل العنصر الأول وبعد العنصر الأخير
يمكن تطبيق هذه الخصائص على كل من الحاوية وعناصر الجدول الفردية. على سبيل المثال ، لمحاذاة محتويات خلية متمركزة رأسيا ، يمكننا تعيين الأنماط على النحو التالي:
الدفتيريا {
عرض: فليكس;
محاذاة العناصر: مركز;
الخلية 3
الخلية 4
الخلية 5
الخلية 7
الخلية 8
الخلية 9
الخلية 10
وأنماط كس لهذا الجدول:
.فليكس الجدول {
عرض: فليكس;
فليكس التفاف: التفاف;
}
.فليكس الجدول آر {
عرض: فليكس;
فليكس: 1 0 السيارات;
}
.فليكس الجدول الدفتيريا {
فليكس: 1 0 السيارات;
الحشو: 10 بكسل;
}
في هذا المثال ، سيكون الجدول مرنا وسيتكيف تلقائيا مع التغييرات في حجم الشاشة أو الحاوية التي يتم وضعها فيها. ستشغل كل خلية في الجدول نفس الجزء من المساحة المتاحة.
باستخدام خصائص فليكسبوكس ، يمكنك إنشاء جداول مرنة أكثر تعقيدا مع نسب مختلفة وتوزيع العناصر. يمكنك أيضا إضافة أنماط كس إضافية إلى نمط الجدول بحيث يتطابق بشكل وثيق مع تصميم صفحة الويب.
سؤال وجواب
ما هو جدول مرن (فليكس)?
فليكس هو أداة المغلق القوية التي تسمح لك لخلق تخطيطات استجابة ومرنة.
كيف يمكنني إنشاء جدول مرن باستخدام فليكس?
لإنشاء جدول مرن باستخدام فليكس ، تحتاج إلى تعيين خاصية" العرض: فليكس "للحاوية وتكوين عناصرها الفرعية باستخدام خصائص" النمو المرن "و" الانكماش المرن "و" الأساس المرن".
ما هي الخصائص التي يمكن استخدامها لإدارة جدول مرن?