تصميم flexbox

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

هناك الكثير من إصدارات flexbox غير المدعومة. إذا كنت تود تعلم المزيد حول هذه الوحدة,،ابدأ من هنا لمعرفة إذا ما كان الأمر مدعومًا أم لا. قمنا بكتابة مقالة مفصلة لشرح كيفية التعامل مع هذه الوحدة.

هناك امور كثيرة يمكنك فعلها مع وحدة flexbox. هذه بعض الأمثلة لتوضيح الفكرة:

تصميم بسيط باستخدام flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}
<div class="container">
<div class="flex-column">
<section>

استخدام flexbox سهل جدًا

</section>
<section>

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

</section>
</div>

تصميم رائع باستخدام flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}
<div class="initial">

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

</div>
<div class="none">

سيكون هذا العنصر دائمًا بحجم 200 بيكسل، مهما حدث.

</div>
<div class="flex1">

سيملأ هذا العنصر ثلث المساحة المتبقية

</div>
<div class="flex2">

سيملأ هذا العنصر ثُلثي المساحة المتبقية

</div>

التوسيط باستخدام flexbox

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
<div class="vertical-container">
<div>

أخيرًا، من السهل جدًا توسيط عنصر ما باستخدام css.

</div>
</div>
  • Creative Commons License