لطفا صبر کنید ...

ایجاد باکس های انعطاف پذیر با استفاده از CSS3

الهام غایب

توسط الهام غایب

نویسنده
دیدگاه ها: 0
بازدید ها : 151
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

این روزها که آرایش استانداردی برای اندازه‌های مختلف صفحه نمایش وجود ندارد، ایجاد باکس‌های انعطاف پذیر با استفاده از CSS3 به کمک ما می‌آید.


آرایش (layout) شاید مهم‌ترین عنصر در زمان طراحی سایت باشد. وقتی بازدیدکنندگان آرایش وب سایت شما را درک کرده و احساس می‌کنند که می‌توانند با آن بازی کنند، تجربه آن‌ها از کار با وب سایت بسیار خوشایند بوده و مدت زمان بیشتری را در سایت مانده و به طور مرتب به وب سایت شما سر می‌زنند. بسیاری از وب سایت‌ها محتوای جذاب و خوبی دارند اما طراحی گیج‌کننده آن‌ها و آرایش درهم ریخته آن باعث می‌شود کاربر اصلا رغبتی به بررسی قسمت‌های مختلف نداشته باشد. با ادامه مقاله در لیداوب همراه ما باشید.

ایجاد باکس های انعطاف پذیر با استفاده از CSS3

این روزها هیچ آرایش استانداردی برای اندازه های مختلف صفحه نمایش کوچک (۲۴۰ پیکسل) تا بزرگ (بیشتر از ۱۹۲۰ پیکسل) وجود ندارد. تا به امروز، روش‌هایی که برای ساخت وب سایت خود به کار می‌بردیم یا استفاده از بلوک‌های inline و یا بلوک‌های سیال بود. اما استفاده از آن‌ها هم زحمات زیادی داشت تا view دلخواه خود را به دست آوریم. اما باکس‌های انعطاف پذیر CSS3 به کمک ما آمده است:

باکس های انعطاف پذیر CSS3

باکس انعطاف پذیر چیست؟

امروزه، بهترین روش برای توضیح چیزی از طریق نگاه کردن به آن است بنابراین، ما با استفاده از flex، یک آرایش کامل ایجاد می‌کنیم. ما در این مقاله از استفاده از هر نوع بلوکی خودداری می‌کنیم. همه چیز با کانتینرهای flex و فلکس باکس ساخته می‌شود:

باکس های انعطاف پذیر CSS3

ابتدا در اینجا مفاهیمی را مشاهده می‌کنید که ما با آن کار خواهیم کرد:

<div class="flex-container">
   <div class="flex-item">1</div>

   <div class="flex-item">2</div>

   <div class="flex-item">3</div>

   <div class="flex-item">4</div>
</div>

این فقط یک کانتینر با ۴ آیتم است و برای اینکه آن‌ها را flex کنیم باید css3 را اضافه کنیم:

<style type="text/css">

   .flex-container {
       /* This is the Chrome notation */

       display: flex;
   }

   .flex-item {
       -webkit-flex: 1;

       flex: 1;
   }

</style>

همانطور که مشاهده می‌کنید، وقتی مقدار display: flex به کانتینر اضافه می‌شود آن را به یک کانتینر فلکس تبدیل می‌کند و تمام فرزندان مستقیم آن به فلکس آیتم تبدیل می‌شوند. Flex-itemها همیشه در تلاش هستند که با کانتیتر والد خود همسو باشند یعنی وقتی کانتینر یک ردیف باشد، با ارتفاع آن منطبق بوده و وقتی کانتینر یک ستون باشد با عرض آن منطبق باشند. فرقی نمی‌کند، بخواهید کانتینر شما یک ردیف یا ستون باشد، در هر صورت می‌توانید از ویژگی flex-flow: column استفاده کنید. در نهایت، هر فلکس آیتم دارای خصوصیت انعطاف پذیری است. ما با استفاده از این ویژگی می‌توانیم تصمیم بگیریم فلکس آیتم‌ها چگونه فضای کانتینر خود را پر کنند.

هر فلکس کانتینر توسط دو محور تعریف می‌شود اما این برای درک دقیق اتفاقی که برای این باکس‌های انعطاف پذیر یا فلکس باکس‌ها می‌افتد کافی نیست. بنابراین، می‌خواهیم با استفاده از فلکس باکس یک آرایش کامل ایجاد کنیم تا تمام سوالات ما پاسخ داده شود.

ایجاد یک آرایش کامل با فلکس باکس 

در اینجا ما ساختار HTML5 زیر را داریم:

<div class="flex-container">

   <header>

       Header

   </header>

   <div class="flex-area">

       <section>

           <article class='featured-article'>

               First Article

           </article>

           <article>

               Second Article

           </article>

           <article>

               Third Article

           </article>

       </section>

       <aside>

           Sidebar

           <div class="box"></div>

           <div class="box"></div>

           <div class="box"></div>

       </aside>

   </div>

   <footer>

       Footer

   </footer>

</div>

باید کمی CSS به این ساختار اضافه کنیم تا به عنوان یک آرایش در نظر گرفته شود. ما از یک آرایش کلاسیک استفاده می‌کنیم یعنی هدر و فوتر تمام صفحه، یک کانتینر متوسط  (.flex-area) که یک محیط دو ستونی با عرض کامل است و بخش اصلی که دارای article اصلی در بالا و دو article دیگر در پایین است، به صورت زیر:

<style type="text/css">

   .flex-container {

       -webkit-flex-flow: column;

       display: flex;

       flex-flow: column;

   }

   header,

   footer {

       -webkit-flex: 0px 0px 100px;

       flex: 0px 0px 100px;

   }

   .flex-area {

       -webkit-flex-flow: row;

       -webkit-flex: 3 1 auto;

       display: flex;

       flex-flow: row;

       flex: 3 1 auto;

   }

   section {

       -webkit-flex-flow: row wrap;

       -webkit-flex: 4 1 auto;

       display: flex;

       flex-flow: row wrap;

       flex: 4 1 auto;

   }

   article {

       -webkit-flex: 1 35%;

       flex: 1 35%;

   }

   .featured-article {

       -webkit-flex: 2 1 100%;

       flex: 2 1 100%;

   }

   aside {

       -webkit-flex-flow: column;

       -webkit-flex: 0px 0px 240px;

       display: flex;

       flex-flow: column;

       flex: 0px 0px 240px;

   }

   .box {

       -webkit-flex: 1;

       flex: 1;

   }

</style

 

باکس های انعطاف پذیر CSS3

این یک آرایش ساده است که با مقدار مناسبی از محتوا با صفحه مطابقت دارد. گرچه در دستگاه‌های کوچک، سایدبار ممکن است باعث ایجاد مشکلاتی در تصویر شود. بنابراین، باید برای واکنش گرا بودن آن به مدیا کوئری نیاز داریم. فلکس باکس با نمایش منظم باکس‌ها در یک ردیف یا ستون در نحوه قرارگیری عناصر هم نقش دارد.

انطباق مدیا کوئری و فلکس باکس با اندازه های مختلف

گرچه ما آرایش فوق‌العاده‌ای ایجاد کردیم اما در دستگاه‌های مختلف اجرا نمی‌شود و هنوز هم نیاز به تغییراتی دارد. بنابراین، می‌خواهیم کمی مدیا کوئری به آن اضافه کنیم. ابتدا می‌خواهیم سایدبار کمی استانداردتر شده و درست زیر هدر نمایش یابد، سپس بخش article و فوتر را جایگذاری کنیم. همچنین، ارتفاع هدر و فوتر را هم کاهش می‌دهیم:

<style type="text/css">

   @media only screen and (max-width:640px) {

       .flex-area {

           -webkit-flex-flow: column;

           flex-flow: column;

       }

       header,

       footer,

       aside {

           -webkit-flex: 0px 0px 50px;

           flex: 0px 0px 50px;

       }

       aside {

           -webkit-flex-flow: row;

           -webkit-order: 1;

           flex-flow: row;

           order: 1;

       }

       section {

           -webkit-order: 2;

           order: 2;

       }

   }

</style>

اگر خواننده از دستگاه کوچک‌تری استفاده کند، دو ستون موجود در بخش article حذف می‌شوند. بنابراین، یک مدیا کوئری برای حذف آن ستون‌ها اضافه کرده و یک سایت عمودی برای دستگاه‌های ۴۲۰ پیکسل یا پایین‌تر ایجاد می‌کنیم:

<style type="text/css">

   @media only screen and (max-width:640px) {

       .flex-area {

           -webkit-flex-flow: column;

           flex-flow: column;

       }

       header,

       footer,

       aside {

           -webkit-flex: 0px 0px 50px;

           flex: 0px 0px 50px;

       }

       aside {

           -webkit-flex-flow: row;

           -webkit-order: 1;

           flex-flow: row;

           order: 1;

       }

       section {

           -webkit-order: 2;

           order: 2;

       }

   }

</style>

 

باکس های انعطاف پذیر CSS3

این یک آرایش ساده و کاملا واکنش گرا می‌باشد که تنها از آخرین نسخه ماژول باکس‌های انعطاف پذیر CSS3 استفاده کرده است. مقدار کد استفاده شده در این روش بسیار کمتر از وب سایت‌هایی با کارایی مشابه است. 

مطالعه مقالات کاربردی مشابه در لیداوب:

برای مطالعه مقالات CSS3 مشابه می‌توانید مقالات ما در کتابخانه آنلاین لیداوب را دنبال کنید. همچنین، ما مشتاق دریافت نظرات و سوالات شما در بخش دیدگاه‌ها هستیم.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های