flexbox or grid

Flexbox & Grid

در دنیای HTML و CSS که نمایش محتوا را به عهده دارند همیشه یک موضوع, سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی می باشد. ما تا به الان سعی کردیم سه مورد از انواع روش های چیدمان یا صفحه آرایی صفحات وب را به شما معرفی کنیم، اما الان باید به شما بگیم که موارد قبلی یعنی جدول گذاری ، مالکیت شناور و موقعیت دهی هیچ کدام برای صفحه آرایی به وجود نیامده اند و هر یک کارایی اصلی دیگری دارند.

اما در این آموزش قصد داریم تا دو ماژول معرفی شده در css3 که صرفا جهت صفحه آرایی و چیدمان به وجود آمده اند را معرفی کنیم :

 

جعبه های منعطف flexbox

ماژول Flexbox : ماژولی برای صفحه آرایی که نه تنها مشکلات روش های قبلی را کنار می زند بلکه ویژگی های بسیار چشم گیر و کاربردی تری را فراهم می سازد، ویژگی هایی همچون :

1. چیدن عناصر در یک ردیف بدون نیاز به تعیین عرض مشخص و دقیق برای آنها

2. امکان تغییر ترتیب عناصر بدون تغییر در سند html

3. تغییر نوع چیدمان از افقی به عمودی و بالعکس فقط با تغییر یک کلمه

4. همتراز کردن از همه جهات (چپ, راست و مرکز) نسبت به عنصر نگهدارنده

5. تعیین اندازه ی عناصر بدون نگرانی در مورد واحد اندازه گیری و تغییر عرض مرورگر (رسپانسیو)

 

طریقه کار با flexbox :

قبل از یادگیری هر گونه ویژگی درمورد جعبه های منعطف ابتدا باید بدانید در این روش دو نوع عنصر داریم که سبک ها بر روی آن ها انجام می گردد :

عنصر نگهدارنده یا container که یشترین ویژگی ها در این روش به این عنصر داده می شود و عناصر فرزند که flex-item نامیده می شوند.

شروع کار، تعیین یک نگهدارنده از نوع flexbox می باشد برای این کار کافیست :

  • .flex-container{ //عنصر نگهدارنده
  • display : flex or inline-flex;
  • }

برای قرار گیری عناصر در کنار یکدیگر و جهت چیدمان آن ها :

  • .flex-container{
  • flex-direction: row | column | row-reverse | column-reverse;
  • }

توجه مقدار پیش فرض ویژگی flex-direction: row می باشد.

ویژگی بعدی که برای عنصر نگهدارنده تعیین می گردد flex-wrap می باشد. به وسیله این ویژگی می توان کنترل کرد که عناصر flex-item در صورت اضافه بودن به خط بعد بروند یا در همان خط مانده و کوچک شوند.

  • .flex-container{
  • flex-wrap: wrap | nowrap | wrap-reverse;
  • }

دو ویژگی فوق را در یک ویژگی به صورت خلاصه می توان ایجاد نمود و آن هم ویژگی flex-flow می باشد.

  • flex-flow: row wrap;

هم ترازسازی عناصر flex-item نسبت به عرض و ارتفاع عنصر نگهدارنده با دو ویژگی کلیدی justify-content و align-items :

  • .flex-container{
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items: stretch | center | flex-start | flex-end | baseline;
  • }

align-content : این ویژگی اجازه می دهد زمانی که flex-item بیشتر از یک ردیف هستند بتوانند نسبت به ارتفاع عنصر نگهدارنده هم ترازسازی شوند :

  • .flex-container{
  • align-content: stretch | center | flex-start | flex-end | space-between | space-around;
  • }

تغییر ترتیب عناصر داخلی flex-item

ویژگی order که به وسیله آن می توان ترتیب نمایش flex-item را بدون تغییر در ساختار html عوض کرد. مقداری که به این ویژگی می توان نسبت داد یک عدد صحیح است. مقدار پیشفرض برای تمام عنصرها عدد 0 است.

انعطاف پذیری در عناصر flex-item

یکی از اصلی ترین و ارزشمندترین امکاناتی که flexbox در اختیار ما قرار می دهد قابلیت انعطاف پذیر بودن اندازه flex-item ها نسبت به فضای عنصر نگهدارنده است. که اگر flex-direction:row عرض انعطاف پذیر و اگر flex-direction:column ارتفاع انعطاف پذیر خواهد بود. به سه ویژگی زیر توجه فرمایید :

flex-grow : این عامل یک عدد صحیح می باشد که نشان می دهد یک عنصر داخلی چند برابر عنصرهای دیگر از فضای عنصر نگهدارنده سهم می برد.

flex-basis : با این ویژگی مقداری از عرض یا ارتفاع را با مقادیر دقیق اندازه گیری به flex-item ها اختصاص می دهیم.

flex-shrink : زمانی که جمع اندازه های flex-item بیشتر از عنصر نگهدارنده می شود و نمی خواهیم سرریز داشته باشیم، باید آنها کمی آب شوند (shrink) تا از سرریز جلو گیری شود.

  • .flex-item1{
  • flex-grow: 1;
  • flex-basis: 400px;
  • flex-shrink: 1;
  • }

توجه سه ویژگی فوق را می توان به صورت ترکیبی و به شکل : flex: grow shrink basis استفاده نمود.

توجه ترازسازی تنها یک عنصر متفاوت با دیگر flex-item با align-self صورت می گیرد.

 

گرید Grid

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

Grid Container

به مانند جعبه های منعطف شروع کار در این روش نیز با تعیین یک نگهدارنده از نوع Grid می باشد برای این کار کافیست : مقدار ویژگی display عنصر پدر عناصر گرید بندی شده برابر با grid باشد:

  • .grid-container {
  • display: grid; /* ساخت گرید با نگهدارنده ای از نوع بلاک */
  • display: inline-grid; /* ساخت گرید با نگهدارنده ای از نوع خطی */
  • display: subgrid; /* برای آیتم های گرید که خود نیز نگهدارنده عناصر گرید هستند */
  • }

شاید لازم باشد با برخی از کلمات کلیدی آشنا شوید :

Grid Item : به فرزندان مستقیم عنصر نگهدارنده گرید، Grid Item گفته می شود. یعنی عناصری با کلاس grid-item .

Grid Line : خطوط گرید خطوطی هستند که گرید را تقسیم بندی می کنند و این خطوط هم در راستای افقی وجود دارند و هم عمودی و از آنها برای تعیین مکان آیتم های گرید استفاده می شود. همچنین می توان از طریق نام و یا شماره به این خطوط اشاره کرد.

Grid Cell : به فضای بین دو خط افقی در کنار هم و دو خط عمودی در کنار هم سلول گرید گفته می شود.

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

Grid Gap : معمولا در طراحی ها بین ستون ها و ردیف ها نیاز داریم تا فاصله داشته باشیم گرید برای این کار ویژگی گپ را بوجود آورده است که بین سلول های گرید فاصله می اندازد.

حال نوبت به معرفی ویژگی های مهم در سیستم گرید رسیده است. ویژگی ها را به دو دسته تقسیم کرده و به شما معرفی می کنیم:

ویژگی های مرتبط به عنصر نگهدارنده عناصر گرید بندی شده که در زیر مشخص می باشند، پس از مشخص کردن display :

  • grid-template-rows: none|auto|max-content|min-content|length;
  • grid-template-columns: none|auto|max-content|min-content|length;
  • justify-content: center|start|end|space-between|space-around|space-evenly;
  • align-content: center|start|end|space-between|space-around|space-evenly;
  • grid-auto-flow: row|column|dense|row dense|column dense;
  • grid-auto-columns: auto|max-content|min-content|length;
  • grid-gap: grid-row-gap grid-column-gap; grid-column-gap: length; grid-row-gap: length;
  • grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

توجه برای آشنایی بیشتر با ویژگی های فوق به اینجا مراجعه نمایید.

ویژگی های مرتبط به عناصر گرید بندی Grid Item که در مرتب سازی سند به شما کمک فراوانی خواهند داد.

  • grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
  • grid-column: grid-column-start / grid-column-end;
  • grid-column-end: auto|span n|column-line;
  • grid-column-start: auto|span n|column-line;
  • grid-row: grid-row-start / grid-row-end;
  • grid-row-end: auto|row-line|span n;
  • grid-row-start: auto|row-line;

توجه برای آشنایی بیشتر با ویژگی های فوق به اینجا مراجعه نمایید.

توجه float, clear, vertical-align هیچ گونه تاثیری روی عناصر فلکس و گرید ندارند.

همچنین بخوانید...!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *