طراحی نوار وضعیت حبابی

در این مقاله، قصد داریم تا نحوه ی طراحی یک نوار وضعیت حبابی را به شما نشان دهیم. در این آموزش، از Javascript و Css و HTML استفاده شده است. لازم به ذکر است که این آموزش، کاملا به صورت تشریحی می باشد.

آنچه که قرار است طراحی کنیم به صورت زیر است:

See the Pen نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

مقدمه ی 1: حالت نمایش flex چیست و چه کاری انجام می دهد؟

 به جعبه هایی(عناصری) که از حالت نمایش flex استفاده می کنند، جعبه های انعطاف پذیر یا flexbox گفته می شود.

جعبه های انعطاف پذیر، یک روش چینش جدید در CSS3 هستند.

با استفاده از flexbox ها، میتوانیم مطمئن شویم که عناصر ما در صفحه های نمایش با اندازه های مختلف و در دستگاه های مختلف به صورت درست و پبش بینی شده ای نمایش می یابند.

درک مفهوم flexbox در css3

جعبه های انعطاف پذیر(flexbox) شامل دو چیز هستند:

1. ظرف های انعطاف پذیر یا همان عناصر دربرگیرنده(container)
2. آیتم های انعطاف پذیر.

برای مشخص کردن یک ظرف انعطاف پذیر، کافی است خصوصیت display از این عنصر را برابر با یکی از مقادیر زیر قرار دهید:

1. مقدار flex که بصورت بلوکی(block) است.
2. مقدار inline-flex که به صورت خطی(inline) است.

در داخل یک ظرف از نوع flex، یک یا چند آیتم قرار می گیرند.

نکته ی مهم: هر چیزی که بیرون از یک ظرف flex و یا در داخل یک آیتم  از نوع flex قرار گیرد، به صورت یک عنصر معمولی در نظر گرفته می شود.

یک جعبه ی انعطاف پذیر(flexbox)، تعیین می کند که آیتم های flex چگونه در داخل یک ظرف flex قرار گیرند(چینش شوند).

آیتم های flex که در درون یک ظرف flex قرار دارند، در امتداد یک خط انعطاف پذیر(flex) موقعیت دهی می شوند. به طور پیش فرض، تنها یک خط انعطاف پذیر در یک ظرف flex وجود دارد.

در مثال زیر، سه آیتم flex نشان داده شده اند. این آیتم ها به طور پیش فرض، در امتداد یک خط انعطاف پذیر پیش فرض، از سمت چپ به راست موقعیت دهی شده اند:

See the Pen عناصر flex مثال 1 by Ehsan Abbasi (@sbaloot) on CodePen.

این امکان نیز وجود دارد که جهت خط انعطاف پذیر را تغییر دهیم.

اگر مقدار direction را برابر با rtl قرار دهیم، متن های درون آیتم ها از راست به چپ (راست چین) می شوند و همچنین جهت خط انعطاف پذیر نیز تغییر می کند که باعث می شود چینش آیتم ها تغییر کند. به مثال زیر توجه کنید:

See the Pen عناصر flex مثال 2 by Ehsan Abbasi (@sbaloot) on CodePen.

جهت یا direction در عناصر انعطاف پذیر

خصوصیت flex-direction جهت آیتم های flex که در داخل ظرف flex قرار گرفته اند را مشخص می کند. مقدار پیش فرض خصوصیت flex-direction برابر با row است. و به این معنی است که آیتم ها از سمت چپ به راست و از بالا به پایین چینش شوند.

مقادیر دیگر خصوصیت flex-direction عبارتند از:

1. مقدار row-reverse : اگر این مقدار برای خصوصیت flex-direction تنظیم شود، در صورتی که جهت نوشتن یا همان direction از چپ به راست باشد، آیتم های flex از سمت راست به چپ چینش می شوند. یعنی برعکس.
2. مقدار column : در صورتی که جهت نوشتن یا همان direction افقی (horizontal) باشد، آیتم های flex به صورت عمودی(vertically) چینش می شوند.
3. مقدار column-reverse: درست مانند مقدار column است اما برعکس.

در مثال زیر، از مقدار row-reverse استفاده شده است:

See the Pen EXxzZJ by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر، از مقدار column استفاده شده است:

See the Pen مثال 5 by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر، از مقدار column-reverse استفاده شده است:

See the Pen مثال 6 by Ehsan Abbasi (@sbaloot) on CodePen.

 به دلیل طولانی شدن این مقاله و زیاد شدن حجم این صفحه ی وب، ادامه ی این آموزش را در مقاله ی بعدی مطالعه نمایید. 

• بعدی