أمثلة فليكس بوكس. التخطيط باستخدام CSS Flexbox. flex – اختصار لخصائص النمو المرن والانكماش المرن والأساس المرن

CSS فليكس بوكس (وحدة تخطيط الصندوق المرن)- وحدة تخطيط الحاوية المرنة - هي طريقة لترتيب العناصر بناءً على فكرة المحور.

يتكون Flexbox من حاوية مرنةو عناصر مرنة. يمكن ترتيب العناصر المرنة في صف أو عمود، ويتم توزيع المساحة الحرة المتبقية بينها بطرق مختلفة.

تتيح لك وحدة flexbox حل المهام التالية:

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

يحل Flexbox مشاكل محددة - إنشاء تخطيطات أحادية البعد، على سبيل المثال، شريط التنقل، حيث لا يمكن وضع العناصر المرنة إلا على أحد المحاور.

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

ما هو فليكس بوكس

دعم المتصفح

أي: 11.0، 10.0 -مللي ثانية-
ثعلب النار: 28.0، 18.0 -موز-
كروم: 29.0، 21.0 -webkit-
سفاري: 6.1 -مجموعة الويب-
الأوبرا: 12.1 -مجموعة الويب-
سفاري iOS: 7.0 -ويبكيت-
أوبرا ميني: 8
متصفح أندرويد: 4.4، 4.1 -مجموعة الويب-
كروم لنظام أندرويد: 44

1. المفاهيم الأساسية

يتم استخدام مجموعة محددة من المصطلحات لوصف وحدة Flexbox. تحدد قيمة التدفق المرن ووضع التسجيل توافق هذه المصطلحات مع الاتجاهات المادية: أعلى / يمين / أسفل / يسار، المحاور: عمودي / أفقي، والأبعاد: العرض / الارتفاع.

المحور الرئيسي— المحور الذي يتم وضع العناصر المرنة عليه. ويمتد إلى البعد الرئيسي.

البداية الرئيسية والنهاية الرئيسية- الخطوط التي تحدد جوانب البداية والنهاية للحاوية المرنة، بالنسبة للعناصر المرنة التي يتم وضعها (بدءًا من البداية الرئيسية وحتى النهاية الرئيسية).

الحجم الرئيسي) - يحدد عرض أو ارتفاع الحاوية المرنة أو العناصر المرنة، اعتمادًا على أي منها في البعد الرئيسي، الحجم الرئيسي للحاوية المرنة أو العنصر المرن.

المحور المتقاطع- محور عمودي على المحور الرئيسي. يمتد في البعد العرضي.

بداية متقاطعة ونهاية متقاطعة- الخطوط التي تحدد جانبي البداية والنهاية للمحور العرضي، بالنسبة للعناصر المرنة التي يتم وضعها.

حجم الصليب- عرض أو ارتفاع الحاوية المرنة أو العناصر المرنة، أيهما كان في البعد المتقاطع، هو البعد المتقاطع لها.

2. الحاوية المرنة

تقوم الحاوية المرنة بتعيين سياق تنسيق مرن جديد لمحتواها. الحاوية المرنة ليست حاوية كتلة، لذا فإن خصائص CSS مثل float وclear وعموديًا لا تعمل مع العناصر الفرعية. أيضًا، لا تتأثر الحاوية المرنة بخصائص column-* التي تنشئ أعمدة في النص والعناصر الزائفة::first-line و::first-letter .

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

حاوية مرنة ( / * تنشئ حاوية مرنة على مستوى الكتلة * / عرض: -webkit-flex؛ عرض: flex؛ ) . حاوية مرنة ( / * تنشئ حاوية مرنة على مستوى الخط * / عرض: -webkit-inline- فليكس؛ عرض: مضمنة فليكس)

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

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

3. العناصر المرنة

العناصر المرنة عبارة عن كتل تمثل محتويات الحاوية المرنة في التدفق. تقوم الحاوية المرنة بإنشاء سياق تنسيق جديد لمحتواها، مما يؤدي إلى الميزات التالية:

• بالنسبة للعناصر المرنة، تكون قيمة خاصية العرض الخاصة بها مقفلة. قيمة العرض: كتلة مضمنة؛ والعرض: خلية الجدول؛ محسوبة في العرض: كتلة؛ .
• تختفي المسافة البيضاء بين العناصر: فهي لا تصبح عنصرًا مرنًا خاصًا بها، حتى لو كان النص الداخلي مغلفًا بعنصر مرن مجهول. لا يمكن تصميم محتوى عنصر مرن مجهول، ولكنه يرث الأنماط (مثل خيارات الخط) من الحاوية المرنة.
• لا يشارك العنصر المرن الذي تم وضعه بشكل مطلق في تخطيط التخطيط المرن.
• لا تنهار هوامش العناصر المرنة المجاورة.
• يتم حساب قيم الهامش والحشوة المئوية من الحجم الداخلي للكتلة التي تحتوي عليها.
• الهامش: تلقائي؛ توسيع، واستيعاب مساحة إضافية في البعد المقابل. يمكن استخدامها لمحاذاة العناصر المرنة المجاورة أو دفعها.
• الحد الأدنى التلقائي لحجم العناصر المرنة هو الحد الأدنى لحجم محتواها، أي min-width: auto؛ . بالنسبة للحاويات القابلة للتمرير، يكون الحد الأدنى للحجم التلقائي عادةً صفرًا.

4. ترتيب عرض العناصر المرنة واتجاهها

يمكن وضع محتويات الحاوية المرنة في أي اتجاه وبأي ترتيب (إعادة ترتيب العناصر المرنة داخل الحاوية يؤثر فقط على العرض المرئي).

4.1. اتجاه المحور الرئيسي: الاتجاه المرن

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

بناء الجملة

الحاوية المرنة (العرض: -webkit-flex؛ -webkit-flex-direction: عكس الصف؛ العرض: flex؛ الاتجاه المرن: عكس الصف؛)

4.2. إدارة الحاوية المرنة متعددة الخطوط: التغليف المرن

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

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

بناء الجملة

حاوية مرنة (العرض: -webkit-flex؛ -webkit-flex-wrap: التفاف؛ العرض: flex؛ flex-wrap: التفاف؛)

4.3. ملخص قصير للاتجاه والخطوط المتعددة: التدفق المرن

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

بناء الجملة

الحاوية المرنة (العرض: -webkit-flex؛ -webkit-flex-flow: التفاف الصف؛ العرض: flex؛ التدفق المرن: التفاف الصف؛)

4.4. عرض ترتيب العناصر المرنة: order

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

في البداية، جميع العناصر المرنة لها ترتيب: 0؛ . عند تحديد قيمة -1 لعنصر ما، يتم نقله إلى بداية المخطط الزمني، ويتم نقل قيمة 1 إلى النهاية. إذا كانت العناصر المرنة المتعددة لها نفس قيمة الطلب، فسيتم عرضها وفقًا للترتيب الأصلي.

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex؛ ) .flex-item ( -webkit-order: 1؛ الطلب: 1؛)
أرز. 6. عرض ترتيب العناصر المرنة

5. مرونة العناصر المرنة

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

سيكون العنصر المرن "غير مرن" تمامًا إذا كانت قيم النمو المرن والانكماش المرن صفرًا، و"مرنًا" بخلاف ذلك.

5.1. ضبط الأبعاد المرنة بخاصية واحدة: flex

الخاصية هي اختصار لخصائص النمو المرن، والانكماش المرن، والأساس المرن. القيمة الافتراضية: فليكس: 0 1 تلقائي؛ . يمكنك تحديد قيمة واحدة أو جميع قيم الخصائص الثلاثة. الملكية ليست موروثة.

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px;)

5.2. عامل النمو: النمو المرن

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

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex؛ ) .flex-item ( -webkit-flex-grow: 3؛ flex-grow: 3؛)

5.3. نسبة الضغط: انكماش مرن

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

بناء الجملة

حاوية مرنة (عرض: -webkit-flex؛ عرض: flex؛) .flex-item (-webkit-flex-shrink: 3؛ ​​flex-shrink: 3؛)

5.4. الحجم الأساسي: أساس مرن

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

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px;)

6. المحاذاة

6.1. محاذاة المحور الرئيسي: ضبط المحتوى

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

بناء الجملة

الحاوية المرنة (العرض: -webkit-flex؛ -webkit-justify-content: flex-start؛ العرض: flex؛ ضبط المحتوى: flex-start؛)

6.2. محاذاة المحاور المتقاطعة: محاذاة العناصر والمحاذاة الذاتية

يمكن محاذاة العناصر المرنة على طول المحور العرضي للصف الحالي للحاوية المرنة. تقوم align-items بتعيين المحاذاة لجميع عناصر الحاوية المرنة، بما في ذلك العناصر المرنة المجهولة. يتيح لك align-self تجاوز هذه المحاذاة للعناصر المرنة الفردية. إذا تم ضبط أي من الهوامش المتقاطعة للعنصر المرن على تلقائي، فلن يكون للمحاذاة الذاتية أي تأثير.

6.2.1. محاذاة العناصر

تقوم الخاصية بمحاذاة العناصر المرنة، بما في ذلك العناصر المرنة المجهولة، على طول المحور العرضي. غير موروث.

بناء الجملة

حاوية مرنة (عرض: -webkit-flex؛ -عناصر محاذاة webkit: flex-start؛ عرض: flex؛ محاذاة العناصر: flex-start؛)

6.2.2. محاذاة الذات

الخاصية مسؤولة عن محاذاة عنصر مرن واحد مع ارتفاع الحاوية المرنة. يتجاوز المحاذاة المحددة بواسطة align-items . غير موروث.

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex؛ ) .flex-item ( -webkit-align-self: center; align-self: center; )

6.3. محاذاة خطوط الحاوية المرنة: align-content

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

بناء الجملة

الحاوية المرنة (العرض: -webkit-flex؛ -webkit-flex-flow: التفاف الصف؛ -webkit-align-content: flex-end؛ العرض: flex؛ flex-flow: التفاف الصف؛ محاذاة المحتوى: flex-end الارتفاع: 100 بكسل)

أود أن أتحدث عن FlexBox. وحدة تخطيط Flexbox (صندوق مرن - "كتلة مرنة"، تشغيل هذه اللحظةتهدف توصية مرشح W3C إلى تقديم المزيد طريقة فعالةتخطيط ومحاذاة وتوزيع المساحة الحرة بين العناصر الموجودة في الحاوية، حتى عندما يكون حجمها غير معروف و/أو ديناميكيًا (ومن هنا جاءت كلمة "مرن").

الفكرة الرئيسية للتخطيط المرن هي منح الحاوية القدرة على تغيير عرض/ارتفاع (وترتيب) عناصرها لملء المساحة بشكل أفضل (في معظم الحالات، لدعم جميع أنواع شاشات العرض وأحجام الشاشات).تقوم الحاوية المرنة بتمديد العناصر لملء المساحة أو ضغطها لمنعها من الفيضان.

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

لأن flexbox عبارة عن وحدة كاملة، وليست خاصية واحدة فقط، فهي تجمع بين العديد من الخصائص.بعضها يجب تطبيقه على الحاوية (العنصر الأصلي، ويسمى الحاوية المرنة)، بينما يتم تطبيق خصائص أخرى على العناصر الفرعية، أو العناصر المرنة.

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

فليكس بوكس

بشكل أساسي، سيتم توزيع العناصر إما على طول المحور الرئيسي (من البداية الرئيسية إلى النهاية الرئيسية) أو على طول المحور العرضي (من البداية المتقاطعة إلى النهاية المتقاطعة).

المحور الرئيسي — المحور الرئيسي الذي تقع عليه العناصر المرنة.يرجى ملاحظة أنه يجب أن يكون أفقيًا، كل هذا يتوقف على جودة محتوى التبرير.
البداية الرئيسية | النهاية الرئيسية - يتم وضع العناصر المرنة في الحاوية من موضع البداية الرئيسية إلى موضع النهاية الرئيسية.
الحجم الرئيسي - عرض أو ارتفاع العنصر المرن اعتمادًا على الحجم الرئيسي المحدد.يمكن أن تكون الكمية الأساسية إما عرض العنصر أو ارتفاعه.
المحور المتقاطع - المحور العرضي المتعامد مع المحور الرئيسي.ويعتمد اتجاهه على اتجاه المحور الرئيسي.
بداية متقاطعة | نهاية متقاطعة - تمتلئ الخطوط المرنة بالعناصر وتوضع في الحاوية من موضع البداية المتقاطعة وموضع النهاية المتقاطعة.
الحجم المتقاطع - عرض أو ارتفاع العنصر المرن، اعتمادًا على البعد المحدد، يساوي هذه القيمة.هذه الخاصية هي نفس عرض العنصر أو ارتفاعه اعتمادًا على البعد المحدد.

ملكيات
العرض: فليكس | مضمنة فليكس.

يحدد حاوية مرنة (مضمنة أو محظورة اعتمادًا على القيمة المحددة)، ويربط السياق المرن لجميع أحفاده المباشرين.

العرض: قيم أخرى | فليكس | مضمنة فليكس.

تذكر:

لا تعمل أعمدة CSS مع الحاوية المرنةلا تعمل التعويم والمسح والمحاذاة العمودية مع العناصر المرنة

الاتجاه المرن

ينطبق قبل العنصر الأصلي للحاوية المرنة.

يضبط المحور الرئيسي، وبالتالي يحدد اتجاه العناصر المرنة الموضوعة في الحاوية.

الاتجاه المرن: صف | عكس الصف | العمود | عكس العمود

الصف (افتراضي): من اليسار إلى اليمين من أجل ltr، ومن اليمين إلى اليسار من أجل rtl؛
عكس الصف: من اليمين إلى اليسار من أجل ltr، ومن اليسار إلى اليمين من أجل rtl؛
العمود: يشبه الصف، من الأعلى إلى الأسفل؛
عكس العمود: مثل عكس الصف، من الأسفل إلى الأعلى.

التفاف المرن

ينطبق قبل العنصر الأصلي للحاوية المرنة.

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

التفاف المرن: nowrap | التفاف | التفاف عكسي

Nowrap (افتراضي): سطر واحد / من اليسار إلى اليمين لـ ltr، ومن اليمين إلى اليسار لـ rtl؛
التفاف: متعدد الأسطر / من اليسار إلى اليمين لـ ltr، ومن اليمين إلى اليسار لـ rtl؛
التفاف عكسي: متعدد الأسطر / من اليمين إلى اليسار لـ ltr، ومن اليسار إلى اليمين لـ rtl.

التدفق المرن

ينطبق قبل العنصر الأصلي للحاوية المرنة.

هذا هو اختصار لخصائص الاتجاه المرن والالتفاف المرن، والتي تحدد معًا المحاور الرئيسية والتقاطعية.القيمة الافتراضية هي الصف الآن.

التدفق المرن< ‘flex-direction’> || < ‘Flex-wrap’>

تبرير المحتوى

ينطبق قبل العنصر الأصلي للحاوية المرنة.

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

ضبط المحتوى: البدء المرن | نهاية مرنة | مركز | مسافة بين | الفضاء حول

flex-start (افتراضي): تنتقل العناصر إلى بداية السطر؛
flex-end: تنتقل العناصر إلى نهاية السطر؛
المركز: تتم محاذاة العناصر إلى منتصف السطر؛
المسافة بين: يتم توزيع العناصر بالتساوي (العنصر الأول في بداية السطر، والأخير في النهاية)
space-around: يتم توزيع العناصر بالتساوي مع وجود مسافة متساوية بين بعضها البعض وخارج الخط.

تبرير المحتوى
محاذاة العناصر

ينطبق قبل العنصر الأصلي للحاوية المرنة.

يحدد السلوك الافتراضي لكيفية وضع العناصر المرنة بالنسبة للمحور المتقاطع على السطر الحالي.فكر في الأمر كنسخة من ضبط المحتوى للمحور المتقاطع (عمودي على المحور الرئيسي).

محاذاة العناصر: البداية المرنة | نهاية مرنة | مركز | خط الأساس | تمتد

البداية المرنة: حدود البداية المتقاطعة للعناصر الموجودة في موضع البداية المتقاطعة؛
flex-end: حدود متقاطعة للعناصر الموجودة في موضع متقاطع؛
المركز: تتم محاذاة العناصر إلى مركز المحور المتقاطع؛
خط الأساس: تتم محاذاة العناصر إلى خط الأساس الخاص بها؛
تمتد (افتراضي): يتم تمديد العناصر لملء الحاوية (مع مراعاة الحد الأدنى للعرض / الحد الأقصى للعرض).

محاذاة العناصر
محاذاة المحتوى

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

محاذاة المحتوى: البداية المرنة | نهاية مرنة | مركز | مسافة بين | الفضاء حول | تمتد

البداية المرنة: تتم محاذاة الخطوط بالنسبة لبداية الحاوية؛
flex-end: تتم محاذاة الخطوط بالنسبة إلى نهاية الحاوية؛
المركز: تتم محاذاة الخطوط إلى وسط الحاوية؛
المسافة بين: يتم توزيع الأسطر بالتساوي (السطر الأول في بداية السطر، والأخير في النهاية)
الفضاء المحيطي: يتم توزيع الخطوط بالتساوي مع وجود مسافة متساوية بين بعضها البعض؛
تمتد (افتراضي): يتم تمديد الخطوط لملء المساحة المتوفرة.

محاذاة المحتوى
طلب

بشكل افتراضي، يتم ترتيب العناصر المرنة بترتيبها الأصلي.ومع ذلك، يمكن لخاصية الطلب التحكم في الترتيب الذي تظهر به في الحاوية.

النظام 1

تنمو المرن

ينطبق على العنصر الفرعي/العنصر المرن. يحدد قدرة العنصر المرن على "النمو" إذا لزم الأمر.يأخذ قيمة بلا أبعاد ويعمل كنسبة.فهو يحدد مقدار المساحة الحرة التي يمكن أن يشغلها العنصر داخل الحاوية. إذا كانت جميع العناصر تحتوي على خاصية flex-grow مضبوطة على 1، فسيتلقى كل طفل نفس الحجم داخل الحاوية.إذا قمت بتعيين أحد الأطفال على 2، فسوف يستغرق ضعف المساحة التي يشغلها الآخرون.

تنمو المرن (الافتراضي 0)

المرن يتقلص

ينطبق على العنصر الفرعي/العنصر المرن.

يحدد قدرة العنصر المرن على الانكماش عند الحاجة.

المرن يتقلص (الافتراضي 1)

لا يتم قبول الأرقام السالبة.
أساس مرن

ينطبق على العنصر الفرعي/العنصر المرن. يحدد الحجم الافتراضي للعنصر قبل تخصيص المساحة في الحاوية.

أساس مرن | تلقائي (تلقائي افتراضي)

ثني

ينطبق على العنصر الفرعي/العنصر المرن. هذا هو اختصار للنمو المرن والانكماش المرن والأساس المرن.تعتبر المعلمات الثانية والثالثة (الانكماش المرن، الأساس المرن) اختيارية.القيمة الافتراضية هي 0 1 تلقائي.

فليكس: لا شيء | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

محاذاة الذات

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

محاذاة ذاتية: تلقائي | بداية مرنة | نهاية مرنة | مركز | خط الأساس | تمتد

أمثلة
لنبدأ بـ جدًا جدًا مثال بسيط، يحدث كل يوم تقريبًا: تكون المحاذاة في المركز تمامًا.لا شيء يمكن أن يكون أسهل إذا كنت تستخدم flexbox.

الأصل ( العرض: flex؛ الارتفاع: 300 بكسل؛ ) .child ( العرض: 100 بكسل؛ / * مهما كان * / الارتفاع: 100 بكسل؛ / * مهما كان * / الهامش: تلقائي؛ / * سحر! * / )

يعتمد هذا المثال على حقيقة أن الهامش الموجود أسفل الحاوية المرنة، الذي تم ضبطه على تلقائي، يستهلك مساحة إضافية، لذا فإن مهمة وضع مسافة بادئة بهذه الطريقة ستؤدي إلى محاذاة العنصر المتمركز تمامًا على كلا المحورين. الآن دعونا نستخدم بعض الخصائص.تخيل مجموعة مكونة من 6 عناصر ذات حجم ثابت (للجمال)، ولكن مع إمكانية تغيير حجم الحاوية.نريد توزيعها بالتساوي أفقيًا بحيث يبدو كل شيء جيدًا عند تغيير حجم نافذة المتصفح (بدون استعلامات @media!).

الحاوية المرنة (
/ * أولاً، لنقم بإنشاء سياق مرن * /
العرض: فليكس؛

/* الآن دعونا نحدد اتجاه التدفق وما إذا كنا نريد العناصر
انتقل إلى سطر جديد
*تذكر أن هذا هو نفسه:
* الاتجاه المرن: الصف؛
* التفاف مرن: التفاف.
* /
التدفق المرن: التفاف الصف؛

/ * الآن دعونا نحدد كيفية توزيع المساحة * /
}

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

/*شاشات كبيرة*/
.ملاحة(
العرض: فليكس؛
التدفق المرن: التفاف الصف؛
/* نقل العناصر إلى نهاية السطر على طول المحور الرئيسي * /
ضبط المحتوى: نهاية مرنة؛
}

الوسائط كلها و (العرض الأقصى: 800 بكسل) (
.ملاحة(
/* بالنسبة للشاشات المتوسطة، نقوم بتوسيط التنقل،
توزيع المساحة الحرة بالتساوي بين العناصر * /
ضبط المحتوى: الفضاء حول؛
}
}

/*شاشات صغيرة*/
الوسائط كلها و (العرض الأقصى: 500 بكسل) (
.ملاحة(
/ * على الشاشات الصغيرة، بدلاً من الصف، نقوم بترتيب العناصر في عمود * /
الاتجاه المرن: العمود؛
}
}

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

غلاف (
العرض: فليكس؛
التدفق المرن: التفاف الصف؛
}

/ * اضبط عرض كافة العناصر على 100% * /
.header، .main، .nav، .aside، .footer (
فليكس 1100%؛
}

/* في هذه الحالة نعتمد على الأمر الأصلي لإرشادنا
* أجهزة محمولة:
* 1 رأس
* 2 ملاحة
* 3 رئيسية
* 4 جانبا
* 5 تذييل
* /

/*شاشات متوسطة*/
الوسائط كلها و (الحد الأدنى للعرض: 600 بكسل) (
/ * يقع كلا الشريطين الجانبيين على نفس السطر * /
جانبا (فليكس: 1 تلقائي؛)
}

/*شاشات كبيرة*/

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

تم إنشاء وحدة تخطيط الصندوق المرن لـ CSS (وحدة CSS للتخطيطات ذات الكتل المرنة)، flexbox للاختصار، لإزالة أوجه القصور عند إنشاء مجموعة واسعة من تصميمات HTML، بما في ذلك تلك التي تم تكييفها مع عروض وارتفاعات مختلفة، وجعل التخطيط منطقيًا وبسيطًا . والنهج المنطقي، كقاعدة عامة، يعمل في أماكن غير متوقعة، حيث لم يتم التحقق من النتيجة - المنطق هو كل شيء!

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

معرفة أساسية

يتكون FlexBox من الحاوية وعناصرها (عناصر مرنة).

لتمكين flexbox، يحتاج أي عنصر HTML فقط إلى تعيين خاصية CSS show:flex; أو العرض: مضمنة فليكس؛ .

بعد تفعيل الخاصية flex، يتم إنشاء محورين داخل الحاوية: المحور الرئيسي والعرضي (عمودي (⊥)، محور متقاطع). تصطف جميع العناصر المتداخلة (من المستوى الأول) على طول المحور الرئيسي. افتراضيًا، يكون المحور الرئيسي أفقيًا وموجهًا من اليسار إلى اليمين (→)، ويكون المحور العرضي عموديًا وموجهًا من الأعلى إلى الأسفل (↓).

يمكن تبديل المحاور الرئيسية والمتقاطعة، ثم سيتم تحديد موقع العناصر من الأعلى إلى الأسفل (↓) وعندما لا تتناسب مع الارتفاع، فإنها ستتحرك من اليسار إلى اليمين (→) - أي أن المحاور قد تم تبديل أماكنها ببساطة . في هذه الحالة لا تتغير بداية ونهاية ترتيب العناصر - فقط الاتجاهات (المحاور) تتغير! ولهذا السبب عليك أن تتخيل المحاور الموجودة داخل الحاوية. ومع ذلك، لا ينبغي للمرء أن يعتقد أن هناك بعض المحاور "المادية" وأنها تؤثر على شيء ما. المحور هنا هو مجرد اتجاه حركة العناصر داخل الحاوية. على سبيل المثال، إذا حددنا محاذاة العناصر إلى مركز المحور الرئيسي ثم قمنا بتغيير اتجاه هذا المحور الرئيسي، فإن المحاذاة ستتغير: العناصر كانت في المنتصف أفقياً، ولكنها أصبحت في المنتصف عمودياً... انظر المثال.

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

خصائص CSS التي يمكن أن تؤثر على نموذج التخطيط: الأعمدة العائمة والواضحة والمحاذاة رأسيًا والأعمدة لا تعمل في التصميم المرن. هنا يتم استخدام نموذج مختلف لإنشاء التخطيط ويتم تجاهل خصائص CSS هذه ببساطة.

خصائص Flexbox CSS

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

للحاوية

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

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

يختلف flex وinline-flex في أنهما يتفاعلان بشكل مختلف مع العناصر المحيطة، على غرار العرض:block وdisplay:inline-block .

يغير اتجاه المحور الرئيسي للحاوية. يتغير المحور العرضي وفقًا لذلك.

• صف (افتراضي)- اتجاه العناصر من اليسار إلى اليمين (→)
• عمود- اتجاه العناصر من الأعلى إلى الأسفل (↓)
• عكس الصف- اتجاه العناصر من اليمين إلى اليسار (←)
• عكس العمود- اتجاه العناصر من الأسفل إلى الأعلى ()

يتحكم في نقل العناصر التي لا تتناسب مع الحاوية.

• نوراب (افتراضي)- يتم وضع العناصر المتداخلة في صف واحد (الاتجاه = الصف) أو في عمود واحد (الاتجاه = العمود) بغض النظر عما إذا كانت موضوعة في حاوية أم لا.
• طَوّق- يتضمن نقل العناصر إلى الصف التالي إذا لم تتناسب مع الحاوية. وهذا يتيح حركة العناصر على طول المحور العرضي.
• التفاف عكسي- نفس اللف، فقط النقل لن يكون لأسفل، بل لأعلى (في الاتجاه المعاكس).

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

يقبل flex-flow قيم هاتين الخاصيتين، مفصولة بمسافة. أو يمكنك تحديد قيمة واحدة لأي خاصية.

/* الاتجاه المرن فقط */ التدفق المرن: صف؛ التدفق المرن: عكس الصف؛ التدفق المرن: العمود؛ التدفق المرن: عكس العمود؛ /* التفاف مرن فقط */ flex-flow: nowrap; التدفق المرن: التفاف. التدفق المرن: التفاف عكسي؛ /* كلا القيمتين في وقت واحد: الاتجاه المرن والالتفاف المرن */ التدفق المرن: الصف nowrap; التدفق المرن: التفاف العمود؛ التدفق المرن: التفاف عكسي للعمود ؛ تبرير المحتوى:

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

• البداية المرنة (افتراضي)- العناصر سوف تبدأ من البداية (قد يكون هناك بعض المساحة المتبقية في النهاية).
• نهاية مرنة- تتم محاذاة العناصر في النهاية (ستبقى المساحة في البداية)
• مركز- في المنتصف (ستبقى المساحة على اليسار واليمين)
• الفضاء بين- يتم ضغط العناصر الخارجية على الحواف (يتم توزيع المسافة بين العناصر بالتساوي)
• الفضاء حول- يتم توزيع المساحة الحرة بالتساوي بين العناصر (لا يتم ضغط العناصر الخارجية على الحواف). ستكون المسافة بين حافة الحاوية والعناصر الخارجية نصف المسافة بين العناصر الموجودة في منتصف الصف.
• الفضاء بالتساوي

محاذاة الصفوف التي تحتوي على عناصر على طول المحور العرضي. مثل ضبط المحتوى فقط للمحور المقابل.

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

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

• تمتد (افتراضي)- تمتد الصفوف لتملأ الصف بالكامل
• بداية مرنة- يتم تجميع الصفوف في الجزء العلوي من الحاوية (قد يكون هناك بعض المساحة المتبقية في النهاية).
• نهاية مرنة- يتم تجميع الصفوف في أسفل الحاوية (ستبقى المساحة في البداية)
• مركز- يتم تجميع الصفوف في وسط الحاوية (ستكون هناك مساحة عند الحواف)
• الفضاء بين- يتم ضغط الصفوف الخارجية على الحواف (يتم توزيع المسافة بين الصفوف بالتساوي)
• الفضاء حول- يتم توزيع المساحة الحرة بالتساوي بين الصفوف (لا يتم ضغط العناصر الخارجية على الحواف). ستكون المسافة بين حافة الحاوية والعناصر الخارجية نصف المسافة بين العناصر الموجودة في منتصف الصف.
• الفضاء بالتساوي- نفس المسافة حول المسافة، فقط المسافة بين العناصر الخارجية وحواف الحاوية هي نفسها بين العناصر.

يقوم بمحاذاة العناصر على طول المحور العرضي داخل صف (صف غير مرئي). أولئك. تتم محاذاة الصفوف نفسها عبر align-content، ويتم محاذاة العناصر الموجودة داخل هذه الصفوف (الصفوف) عبر align-items وعلى طول المحور العرضي. لا يوجد مثل هذا التقسيم على طول المحور الرئيسي، ولا يوجد مفهوم للصفوف ويتم محاذاة العناصر من خلال justify-content .

• تمتد (افتراضي)- يتم تمديد العناصر لملء الخط بالكامل
• بداية مرنة- يتم الضغط على العناصر إلى بداية الصف
• نهاية مرنة- يتم الضغط على العناصر حتى نهاية الصف
• مركز- تتم محاذاة العناصر إلى وسط الصف
• حدود- تتم محاذاة العناصر إلى خط الأساس للنص

لعناصر الحاوية

يضبط عامل تكبير العنصر عند وجود مساحة خالية في الحاوية. النمو المرن الافتراضي: 0 أي. يجب ألا ينمو أي من العناصر ويملأ المساحة الحرة في الحاوية.

النمو المرن الافتراضي: 0

• إذا قمت بتحديد flex-grow:1 لجميع العناصر، فسوف تمتد جميعها بالتساوي وتملأ كل المساحة الحرة في الحاوية.
• إذا قمت بتحديد flex-grow:1 لأحد العناصر، فسوف يملأ كل المساحة الحرة في الحاوية ولن تعمل المحاذاة عبر justify-content بعد الآن: لا توجد مساحة خالية للمحاذاة...
• مع النمو المرن:1 . إذا كان لدى أحدهم نمو مرن: 2 فسيكون أكبر مرتين من الآخرين
• إذا كانت جميع الصناديق المرنة الموجودة داخل الحاوية المرنة تحتوي على flex-grow:3، فستكون بنفس الحجم
• مع النمو المرن:3 . إذا كان أحدهما يتمتع بنمو مرن: 12، فسيكون أكبر بأربع مرات من جميع الآخرين

كيف تعمل؟ لنفترض أن الحاوية يبلغ عرضها 500 بكسل وتحتوي على عنصرين، يبلغ عرض قاعدة كل منهما 100 بكسل. وهذا يعني أن هناك 300 بكسل مجانية متبقية في الحاوية. الآن، إذا حددنا flex-grow:2; ، والنمو المرن الثاني: 1؛ ، فإن الكتل سوف تشغل كامل العرض المتاح للحاوية وسيكون عرض الكتلة الأولى 300 بكسل، والثانية 200 بكسل. ويفسر ذلك حقيقة أن المساحة الحرة المتوفرة في الحاوية والتي تبلغ 300 بكسل تم توزيعها بين العناصر بنسبة 2:1، +200 بكسل للعنصر الأول و+100 بكسل للثاني.

ملاحظة: يمكن تحديد القيمة أرقام كسريةعلى سبيل المثال: 0.5 - flex-grow:0.5

يضبط عامل التخفيض للعنصر. الخاصية هي عكس خاصية flex-grow وتحدد كيفية تقليص العنصر إذا لم تكن هناك مساحة خالية متبقية في الحاوية. أولئك. تبدأ الخاصية في العمل عندما يكون مجموع أحجام جميع العناصر أكبر من حجم الحاوية.

الانكماش المرن الافتراضي:1

لنفترض أن الحاوية يبلغ عرضها 600 بكسل وتحتوي على عنصرين، عرض كل منهما 300 بكسل - flex-basis:300px; . أولئك. عنصرين يملأان الحاوية بالكامل. أعط العنصر الأول flex-shrink: 2; ، والانكماش المرن الثاني: 1؛ . الآن دعونا نقوم بتقليل عرض الحاوية بمقدار 300 بكسل، أي. يجب أن تتقلص العناصر بمقدار 300 بكسل لتناسب الحاوية. سوف تتقلص بنسبة 2:1، أي. سيتم تقليص الكتلة الأولى بمقدار 200 بكسل، والثانية بمقدار 100 بكسل، وستصبح أحجام العناصر الجديدة 100 بكسل و200 بكسل.

ملاحظة: يمكنك تحديد أرقام كسرية في القيمة، على سبيل المثال: 0.5 - flex-shrink:0.5

يضبط العرض الأساسي للعنصر - العرض قبل حساب الشروط الأخرى التي تؤثر على عرض العنصر. يمكن تحديد القيمة في px، em، rem، %، vw، vh، إلخ. سيعتمد العرض الناتج على عرض القاعدة وقيم flex-grow و flex-shrink والمحتوى الموجود داخل الكتلة. باستخدام auto، يحصل العنصر على عرض أساسي بالنسبة للمحتوى الموجود بداخله.

الافتراضي: تلقائي

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

سيكون الأساس المرن "جامدًا" إذا تم ضبط التمدد والانكماش على الصفر: flex-basis:200px; النمو المرن:0; الانكماش المرن:0؛ . يمكن كتابة كل هذا على النحو التالي: flex:0 0 200px; .

ملخص قصير للخصائص الثلاث: flex-grow flex-shrink flex-basis .

الافتراضي: فليكس: 0 1 تلقائي

ومع ذلك، يمكنك تحديد قيمة واحدة أو قيمتين:

فليكس: لا شيء؛ /* 0 0 تلقائي */ /* الرقم */ flex: 2; /* flex-grow (ينتقل الأساس المرن إلى 0) */ /* ليس رقمًا */ flex: 10em; /* الأساس المرن: 10em */ flex: 30px; /* الأساس المرن: 30 بكسل */ flex: auto; /* الأساس المرن: تلقائي */ flex: content; /* الأساس المرن: المحتوى */ flex: 1 30px; /* النمو المرن والأساس المرن */ flex: 2 2; /* النمو المرن والانكماش المرن (ينتقل الأساس المرن إلى 0) */ flex: 2 2 10%; /* النمو المرن والانكماش المرن والأساس المرن */ align-self:

يسمح لك بتغيير خاصية align-items، لعنصر واحد فقط.

الافتراضي: من حاوية العناصر المحاذاة

• تمتد- يتم تمديد العنصر لملء السطر بالكامل
• بداية مرنة- يتم الضغط على العنصر إلى بداية السطر
• نهاية مرنة- يتم الضغط على العنصر حتى نهاية السطر
• مركز- يتم محاذاة العنصر إلى منتصف السطر

حدود- يتم محاذاة العنصر مع خط الأساس للنص

يسمح لك بتغيير ترتيب (موضع، موضع) عنصر في الصف العام.

الافتراضي: الترتيب: 0

بشكل افتراضي، يكون ترتيب العناصر: 0 ويتم وضعها حسب ترتيب ظهورها في تعليمات HTML البرمجية واتجاه الصف. لكن إذا قمت بتغيير قيمة خاصية الطلب، فسيتم ترتيب العناصر حسب ترتيب القيم: -1 0 1 2 3 ... . على سبيل المثال، إذا قمت بتحديد الترتيب: 1 لأحد العناصر، فسيتم وضع جميع الأصفار أولاً، ثم العنصر الذي يحمل الرقم 1.

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

ملحوظات

ما هو الفرق بين الأساس المرن والعرض؟

فيما يلي الاختلافات المهمة بين الأساس المرن والعرض/الارتفاع:

الأساس المرن يعمل فقط للمحور الرئيسي. هذا يعني أنه مع الاتجاه المرن: يتحكم الأساس المرن للصف في العرض، ومع الاتجاه المرن: يتحكم العمود في الارتفاع. .

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

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

• عند استخدام الخاصية flex، يمكن دمج 3 قيم (flex-grow/flex-shrink/flex-basis) وكتابتها لفترة وجيزة، ولكن لزيادة العرض أو تقليصه تحتاج إلى الكتابة بشكل منفصل. على سبيل المثال: flex:0 0 50% == width:50%; الانكماش المرن:0؛ . في بعض الأحيان يكون الأمر غير مريح.

إذا كان ذلك ممكنًا، فلا تزال تفضل الأساس المرن. استخدم العرض فقط عندما يكون الأساس المرن غير مناسب.

الفرق بين الأساس المرن والعرض - خطأ أم ميزة؟

المحتوى الموجود داخل العنصر المرن يدفعه ولا يمكنه تجاوزه. ومع ذلك، إذا قمت بتعيين العرض باستخدام width أو max-width بدلاً من flex-basis، فسيكون العنصر الموجود داخل الحاوية المرنة قادرًا على التوسع خارج حدود تلك الحاوية (أحيانًا يكون هذا هو السلوك الذي تريده بالضبط). مثال:

أمثلة على التخطيط المرن

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

#1 مثال بسيط للمحاذاة الرأسية والأفقية

لنبدأ بأبسط مثال - المحاذاة الرأسية والأفقية في نفس الوقت وعند أي ارتفاع للكتلة، حتى المطاط.

أو هكذا بدون كتلة بالداخل:

#1.2 الفصل (الفاصل) بين عناصر الكتلة المرنة

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

#2 القائمة التكيفية على المرن

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

#3 3 أعمدة متكيفة

يوضح هذا المثال كيفية إنشاء 3 أعمدة بسرعة وسهولة، والتي عند تضييقها ستتحول إلى 2 ثم إلى 1.

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

انتقل إلى jsfiddle.net وقم بتغيير عرض قسم "النتيجة".

#4 الكتل التكيفية باستخدام المرن

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

انتقل إلى jsfiddle.net وقم بتغيير عرض قسم "النتيجة".

#5 معرض مع المرن والانتقال

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

#6 فليكس إلى فليكس (مجرد مثال)

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

لحل هذه المشكلة، يتم تمديد الكتل نفسها بواسطة المرن وتعيينها على أقصى عرض ممكن. كل كتلة داخلية هي أيضًا بنية مرنة، مع محور دوار flex-direction:column؛ والعنصر الموجود في المنتصف (حيث يوجد النص) ممتد flex-grow:1; لملء كل المساحة الفارغة، هكذا يتم تحقيق النتيجة - بدأ النص بسطر واحد...

مزيد من الأمثلة

دعم المتصفح - 98.3%

بالطبع لا يوجد دعم كامل، لكن جميع المتصفحات الحديثة تدعم تصميمات flexbox. لا يزال البعض يتطلب البادئات. للحصول على صورة حقيقية، دعونا نلقي نظرة على caniuse.com ونرى أن 96.3% من المتصفحات المستخدمة اليوم ستعمل بدون بادئات، مع 98.3% تستخدم البادئات. يعد هذا مؤشرًا ممتازًا لاستخدام flexbox بثقة.

لمعرفة البادئات ذات الصلة اليوم (يونيو 2019)، سأقدم مثالاً على جميع القواعد المرنة ذات مع البادئات اللازمة:

/* الحاوية */ .flex ( العرض:-webkit-box; العرض:-ms-flexbox; العرض: flex; العرض:-webkit-inline-box; العرض:-ms-inline-flexbox; العرض:inline-flex; -webkit-box-orient:vertical; -ms-flex-direction:column; -ms-flex-wrap; -flex-flow:column Wrap; -webkit-box-pack:justify; :justify; -flex- Negative:2; -ms-flex-preferred-size:100px; -ms-flex:1 2 100px; :3; ​​-ms-flex-order:2);

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

• (جديد) - بناء الجملة الجديد: العرض: فليكس؛ .
• (tweener) - بناء جملة غير رسمي قديم من عام 2011: العرض: flexbox؛ .
• (قديم) - بناء الجملة القديم من عام 2009: العرض: المربع؛

فيديو

حسنًا، لا تنسَ الفيديو، ففي بعض الأحيان يكون أيضًا مثيرًا للاهتمام ومفهومًا. وهنا بضعة منها شعبية:

روابط مفيدة على فليكس

flexboxfroggy.com - لعبة flexbox التعليمية.

Flexplorer هو منشئ الأكواد المرئية المرنة.

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

تحتوي العديد من برامج تحرير الأكواد البرمجية على مكون إضافي مناسب للترميز السريع مدمج أو متاح للتنزيل افتراضيًا، Emmet، والذي يسمح لك بإجراء الترميز الأساسي لهذا المثال على النحو التالي: القسم> شعبة * 3> لوريم+ علامة التبويب (القيمة لوريمينشئ النص الذي يظهر في الصورة أدناه).

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

ليست عناصر مرنة بشكل افتراضي وتقع في التدفق ثالثعنصر