ماهر شدن در CSS flexbox در 5 مرحله ساده

ماهر شدن در CSS flexbox در 5 مرحله ساده

ماهر شدن در CSS flexbox در 5 مرحله ساده

ماهر شدن در CSS flexbox در 5 مرحله ساده

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

پس با استفاده از این ابزار مفید (flexbox) ، خواص برجسته آن را در هر مرحله را آزمایش کنید.

Flex Container

برای شروع، شما نیاز به یک عنصر پیچیده دارید. این بسته بندی می تواند div، section، header، footer یا حتی ul باشد. در اینجا یک مثال از یک ساختار مشترک آورده شده:

سپس مجموعه ویژگی های والد آن کلاس نمایش داده میشود :

.grid{

      display: flex;

      display: -webkit-flex; /* Support for older browsers */

}

اعلام flex تنها شما را مجبور به تبدیل تمام عناصر به موارد flex می کند. پنج روش اصلی برای چگونگی قرار دادن اقلام در لیست Flex  شما وجود دارد. دو مورد شامل خواصی است که شما می توانید در مخزن Flex ، و سه مورد دیگر را در انتخاب گزینه Flex داشته یاشید. در اینجا این پنج مرحله شرح داده میشود.

1 – Flow

به طور پیش فرض، محصولات Flex  شما از راست به چپ در یک ردیف شروع می شود که از گوشه سمت چپ مخزن  Flex شما شروع می شود. شما می توانید با Flex  , Flow را کنترل کنید.

flex-flow: flex-direction || flex-wrap;

 

 

  • جهت ارسال موارد به صورت افقی در یک ردیف یا عمودی در یک ستون.
  • از Flex استفاده کنید تا آیتم ها را در یک ردیف یا ستون قرار دهید (مانند کلمات در پاراگراف)

FLEX-DIRECTION

row, column, row-reverse , column-reverse

row: موارد flex را به صورت افقی از چپ به راست قرار می دهد.

row-reverse: صورت افقی از راست به چپ مرتب می کند.

Column: عناصر flex را از بالا به پایین به صورت عمودی قرار می دهد

column-reverse: از پایین به بالا تنظیم میکند.

FLEX-WRAP

nowrap (default), wrap or wrap-reverse

wrap: آیتم های flex را به صورت خودکار در صورت رعایت عناصر والدین و یا اندازه صفحه نمایش، flex تر می کند.

به عبارت ساده، اگر پنج عدد flex در یک ردیف داشته باشید هر کدام از آنها 125 پیکسل است، اما عرض صفحه نمایش فقط 480 پیکسل است، در زیر موارد flex-flow در دو ردیف نمایش داده میشود:

flex-flow: row wrap;

wrap-reverse فقط جریان را عوض می کند بنابراین موارد ردیف بعدی از جهت flex-direction مخالف استفاده می کنند. در بیشتر موارد، شما فقط از این مورد برای حل یک مشکل خاص استفاده می کنید.

Nowrap تمام اقلام flex را به یک خط یا یک ستون متصل می کند و همانند مقدار flex-wrap نیست. در بیشتر موارد، شما می خواهید از wrap استفاده کنید.

clear بر روی یک مورد flex تاثیر نمی گذارد.

float باعث می شود که صفحه نمایش عنصر برای محاسبه برای مسدود شود.

.grid{

    display: flex;

    flex-flow: row wrap;

}

توجه داشته باشید: row و row-reverse وابسته به حالت نوشتن است بنابراین در متن rtl، نقاط شروع آنها معکوس خواهد شد.

2 - تعدیل ردیف ها و ستون ها

Flexbox به ما امکان می دهد را در داخل flex، justify-content و align-items را توجیه کنیم.

justify-content موقعیت افقی را برای ردیف ها یا موقعیت عمودی ستونها کنترل می کند.

align-items  موقعیت عمودی را برای ردیف ها یا موقعیت افقی ستون ها کنترل می کند.

JUSTIFY-CONTENT

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start  موارد flex را در سمت چپ (ردیف) یا بالا (ستون) flex قرار می دهد و به طور پیش فرض (فرض می کند حالت خواندن ltr است)

flex-end  موارد flex را از راست (ردیف) یا پایین (ستون) flex قرار می دهد.

center  موارد flex را بصورت افقی (ردیف) یا عمودی (ستون) قرار می دهد

space-between  آیتم های flex را با فاصله مساوی بین توزیع می کند و اولین آیتم flex را در لبه سمت چپ / بالای flex و آخرین آیتم فلش به سمت راست / پایین قرار می دهد.

space-around  موارد flex را از بالا (ردیف) یا چپ (ستون) مخزن flex با لبه های بالا یا چپ آیتم های فلکس تراز می کند. را به طور مساوی به فضای اطراف آن توزیع می کند، از جمله اولین و آخرین مورد.

ALIGN-ITEMS

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start  موارد flex را از بالا (ردیف) یا چپ (ستون) flex با لبه های بالا یا چپ آیتم های flex تراز می کند.

flex-end  موارد flex از پایین (ردیف) یا راست (ستون) flex را با لبه های پایین یا راست آیتم های flex تنظیم می کند

Center  موارد flex را بصورت افقی (ستون) یا عمودی (ردیف) تنظیم می کند.

Baseline  بهترین استفاده از آن هنگامی است که flex را در ارتفاع های مختلف (ردیف) و یا عرض (ستون) متفاوت است.

Stretch  در اینجا تمرکز ویژه ای به خود می گیرد زیرا مسئولیت آن است که تمام flex را برابر یکدیگر نگه دارند، در حالی که ارتفاع کلی از بالاترین flexی به ارث رسیده است. کشش توسط defaultbox توسط flexbox تنظیم شده است، بنابراین در هنگام کار با سطوح flex، این را در نظر بگیرید.

ALIGN-CONTENT

اگر شما نیاز به یک روش برای توزیع تمام ردیف ها یا ستون ها به صورت یکسان در یک flex container دارید، می توانید این کار را را با align-content انجام دهید.

align-content: flex-start | flex-end | center | space-between | space-around | stretch
 

این مقادیر درست مثل justify-content کار می کند، و به ردیف یا ستون به جای موارد flex فردی اعمال می شود.

NOTES

alignment بعد از اینکه طول و حاشیه های خودکار اعمال می شود، انجام می شود، بنابراین مهم است که موارد زیر را ذکر کنید:

  space-around و space-between فقط زمانی کار می کند که فضای اضافی در flex وجود داشته باشد، یعنی بلندتر یا گسترده تر از ردیف ها / ستون های شما باشد، بنابراین از لبه آن برای لزوما حاشیه ها استفاده نکنید.

 justify-content و align-items  هیچ تاثیری بر موارد flex که با استفاده از ویژگی flex اندازه می گیرند، تاثیری نخواهد گذاشت.

vertical-align  بر روی تراز بندی موارد flex تاثیر نمی گذارد.

3 – Flex Item Sizing

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

اندازه با واحد

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

 

.column {    
        margin: 10px;    
        width: 33.33%;           
}

4 - تراز کردن آیتم های flex

justify-content and align-items به ما کمک می کند تا موارد flex را نسبت به flexbox مقایسه کنیم. align-self ما را قادر می سازد تا یک محصول flex را نسبت به اقلام خود مقایسه کنیم.

align-self: auto | flex-start | flex-end | center | baseline | stretch

 

flex-start  بالا (ردیف) یا چپ (ستون)

flex-end  پایین (ردیف) یا راست (ستون)

Center  اگر اندازه متقاطع مورد بزرگتر از مخزن flex باشد، در هر دو جهت به طور یکسان سرریز می شود.

Stretch  قطعه flex را برای پر کردن ارتفاع flex (اگر قادر باشد) تنظیم میکند.

تمام موارد flex به گونه ای تنظیم می شوند که خطوط پایه آنها هماهنگ شوند. زمانی که یک اندازه مورد flexمتفاوت است، ابتدایی مفید است و پایه پایدار را حفظ می کند.

5 – Order

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

order: number;

شما می توانید انواع سفارشات را با توجه به انتخابگرهای CSS که برای هدف قرار دادن موارد flex استفاده می کنید استفاده کنید.

.column:nth-of-type(1){

      order: 5;

}

.column:nth-of-type(2){

      order: 1;

}

.column:nth-of-type(3){

      order: 2;

}

.column:nth-of-type(4){

      order: 3;

}

.column:nth-of-type(5){

      order: 4;

}

 

 

 

نظرات خود را با ما در میان بگذارید

(0)نظر


ارسال دیدگاه

ارسال دیدگاه

گروه بندی مطالب

برچسب ها