كيفية استخدام Flexbox لإنشاء تخطيط تصميم بطاقة CSS حديث

بفضل Flexbox ، وهو وضع تخطيط جديد في CSS3 ، يمكننا الحصول على جميع بطاقاتنا على التوالي - حرفيًا. ازدادت شعبية تصميمات البطاقات خلال السنوات القليلة الماضية ؛ كما لاحظت على الأرجح ، احتضنت مواقع التواصل الاجتماعي البطاقات حقًا. يستخدم Pinterest و Dribbble تخطيطات البطاقة لعرض المعلومات والمرئيات. وإذا كنت تستخدم التصميم متعدد الأبعاد ، فإن بطاقات Google موصوفة جيدًا في مكتبة الأنماط الخاصة بهم.

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

كيفية إنشاء تخطيط بطاقة

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

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

Flexbox والتنوع

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

كيفية إنشاء التخطيط

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

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

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

القسم الذي يحتوي على فئة .cards هو ما سنستهدفه أولاً. إن خاصية عرض الحاوية هي ما نحتاج إلى تغييره إلى flex .

إليك HTML الذي تريد أن تبدأ به:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

إليك CSS لتبدأ بها:

.cards {
   display: flex;
   justify-content: space-between;
}

خاصية المرن

قبل التعمق في الأمر ، من الجيد معرفة أساسيات الخاصية المرنة. تحدد الخاصية flex طول العنصر بالنسبة لبقية العناصر المرنة داخل نفس الحاوية. الخاصية المرنة هي اختصار للخواص flex-grow ، flex-shrink flex-basis . القيمة الافتراضية هي 0 1 auto; . في رأيي ، فإن أفضل طريقة لفهم Flexbox تمامًا هي اللعب بالقيم المختلفة ومعرفة ما سيحدث.

تحدد خاصية الزيادة flex-grow لعنصر مرن مقدار المساحة داخل الحاوية المرنة التي يجب أن يشغلها العنصر.

تحدد الخاصية flex-shrink كيفية تقلص العنصر بالنسبة لبقية العناصر المرنة داخل نفس الحاوية.

تحدد خاصية flex-basis الحجم الرئيسي الأولي للعنصر المرن. تحدد هذه الخاصية حجم مربع المحتوى ، ما لم يتم تحديد خلاف ذلك باستخدام تحجيم الصندوق. Auto هو الافتراضي عندما يتم تحديد العرض بواسطة المحتوى ، وهو مشابه width: auto; . سوف تشغل مساحة محددة من خلال محتواها الخاص. يمكن أن تكون هناك قيمة محددة تظل صحيحة كما هو موضح في flex-basis: 15em; . إذا كانت القيمة 0 ، فسيتم تعيين الأشياء بشكل جيد لأن العنصر لن يتوسع لملء المساحة الخالية.

بدأنا مع display: flex; justify-content: space-between; وفي هذه المرحلة ، تكون الأمور غير متوقعة بعض الشيء. يتم استخدام Flexbox ، على الرغم من أنه ليس واضحًا جدًا في الوقت الحالي. مع هذا الإعلان ، تم وضع كل عنصر من العناصر المرنة بجوار بعضها في صف أفقي.

شاهد هذا على Codepen.

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

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

بشكل افتراضي ، ستحاول العناصر المرنة وضعها في سطر واحد. إضافة flex-wrap: wrap; يجعل العناصر تلتف تحت بعضها البعض لأن الافتراضي هو العرض الكامل.

شاهد هذا على Codepen.

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

نحن بحاجة إلى إضافة فئة .card الآن لتصميم بطاقاتنا الفردية. يمكن أن يذهب هذا الحق أسفل أنماط .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

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

شاهد هذا على Codepen.

قمنا بتعيين خاصية justify-content لأغراض التباعد. يتم عرض العنصر الأول بشدة جهة اليسار ، ويتم عرض العنصر الثاني والثالث في المنتصف ، بينما يتم عرض العنصر الرابع جهة اليمين بشدة. نظرًا لأن عرض البطاقة يبلغ 24٪ ، هناك بعض المساحة المتبقية لأن أعمدةنا الأربعة بنسبة 24٪ لا تبلغ 100٪. يتبقى لدينا 4٪ على وجه الدقة. يتم وضع هذه 4٪ بالتساوي بين كل عنصر. لذلك لدينا ما يقرب من 1.33٪ من المسافة بين البطاقات.

شاهد هذا على Codepen.

يمكننا أن نكون أكثر دقة أيضًا باستخدام calc . سيبدو تغيير قيمة flex-basis لاستخدام الحساب كما يلي:

.card {
	flex: 0 1 calc(25% - 1em);
}

الشيء الرائع في هذا هو أن المتصفح سيأخذ 25٪ من المساحة ويزيل 1em منها ، مما يجعل البطاقات أصغر قليلاً.

إنها طريقة رائعة لضبط المساحة المتاحة. يتم توزيع 1em بالتساوي بين العناصر وينتهي بنا الأمر بالتخطيط المثالي.

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

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

بطاقات للأجهزة الصغيرة

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

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

فيما يلي نقاط التوقف التالية التي سيتم استخدامها (لا تتردد في استخدام ما يخصك أيضًا ، فالمفاهيم لا تزال سارية):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

لقد كان تفكيرًا كبيرًا حتى الآن. دعنا ندخل في عقلية الجوال أولاً ونبدأ بـ min-width: 40em breakpoint.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

من خلال هذه التغييرات ، سيتم عرض البطاقات في عرض ملء الشاشة وستتكدس أسفل بعضها البعض على أي شاشة يقل عرضها عن 640 بكسل. إذا قمت بتوسيع نافذة المتصفح إلى أي شيء أعلى من ذلك ، فسيتم إرجاع عمود الأربعة. هذا منطقي لأن الحد min-width هو 40em وهذا هو المكان الذي أنشأنا فيه صفًا من أربع بطاقات.

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

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

استعلام الوسائط الجديد min-width 60em كحد أدنى هو المكان الذي سيتم فيه الإعلان عن البطاقات الأربعة. الحد min-width 40em هو المكان الذي سيتم فيه الإعلان عن صف البطاقتين. السحر يحدث مع قيمة Flex calc بنسبة 50٪ - 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

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

شاهد هذا على Codepen.

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

محتوى ديناميكي وآخر صف من تباعد البطاقات

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

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

تم إجراء تصميم .cards و .card خارج استعلام وسائط:

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

الاستعلامات الإعلامية هي المكان الذي يتم فيه تحديد عدد البطاقات:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

ألق نظرة على Codepen لرؤية الحل المعدل.

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

التالي: تصميم مواقع WordPress بشكل أسرع

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

قم بتنزيل الدليل المجاني هنا!

ما الذي قمت ببنائه أيضًا باستخدام Flexbox؟ شارك مشاريعك في التعليقات!