Flexbox CSS با تلفظ فلکس باکس، یک مدل طراحی UI است که برای توسعه دهنده قابلیت طراحی ساده ستون ها و بلوک ها را فراهم می کند. به عبارت دیگر با استفاده از فلکس باکس (Flexbox) می توانید به صورت عمودی (Vertically) یا افقی (Horizontally) ستون ها یا ردیف هایی را تولید کرده و در صفحه به نمایش بگذارید.
کلمه Flex مخفف Flexibility یا همان انعطاف پذیری است و با استفاده از فلکس باکس میتوان صفحات رسپانسیو (واکنش گرا) یا Responsive بسیار حرفه ای تولید کرد.
امروزه تمام مرورگرهای مدرن (بیش از ۹۹ درصد) از قابلیت فلکس باکس پشتیبانی می کنند. از طرفی اکثر موبایل ها (۱۰۰ درصد) نیز از این امکانات برخوردار هستند.
Flexbox چیست؟
فلکس باکس یکی از ماژول های CSS3 است که به توسعه دهنده امکان لایه بندی و چینش المان ها را می دهد. پیش از این اکثر برنامه نویسان برای تعیین موقعیت یک المان، معمولا از دستورها position یا width و یا float استفاده می کردند که به کار بردن همزمان این دستورها کاری دشوار و طاقت فرسا بود. در نهایت در سال ۲۰۱۷ قابلیت فلکس باکس توسط W3C ارائه و با استقبال توسعه دهنده رو به رو شد.
پیش نیاز دوره
برای استفاده از این دوره باید به مفاهیم HTML و CSS تسلط کافی را داشته باشید. دوره آموزشی مقدماتی تا پیشرفته HTML و CSS (پروژه محور) در اختیار شماست تا این تخصص را بدست آورید.
چرا باید از Flexbox استفاده کنیم؟
در حالت عادی، اگر چنانچه بخواهید یک المان را در صفحه موقعیت دهی کنید، کارهای بسیار زیادی را باید انجام دهید (مثل تعیین position و float). تازه اگر این پیاده سازی ها برای تمام المان ها به درستی انجام شود، چالش اصلی، یعنی ریسپانسیو بودن آنها، پیش روی شماست.
این درحالیست که اگر از Flexbox (فلکس باکس) استفاده کنید، به راحتی و تنها با چند دستور ساده می توانید علاوه بر موقعیت دهی صحیح یک المان، قابلیت رسپانسیو بودن آنها را نیز چک کنید.
مزیت های Flexbox
- تعیین نوع نمایش المان (سطری یا ستونی)
- تعیین عرض هر المان
- پر کردن فضاهای خالی صفحه متناسب با سایز المان
- درنظر گرفتن فواصل استاندارد بین المان ها
- چینش معکوس المان ها
- تعیین ترتیب نمایش هر عنصر
- راستچین یا چپ چین کردن عناصر
اصطلاحات
قبل از ورود به دوره آموزشی با اصطلاحات زیر آشنا شوید:
Flex container: المان والدی که تمام آیتم‌های Flex درون آن قرار می گیرند.
Flex item: هر المان فرزندی که درون Flex container نگهداری می شود و تمایل دارد به صورت Flex نمایش داده شود. هر متنی درون این المان نیز به صورت Flex می باشد.
Axes: محورهای نمایشی المان که می تواند در راستای محور y یا عمودی (ستونی) و یا در راستای محور x – افقی (ردیف) باشد.
Flex-direction: جهت نمایش عناصر را مشخص می کند که معمولا در چهار وضعیت row و row-reverse و column و column-reverse استفاده می شود.
Justify-content: این ویژگی حالت قرارگیری المان ها در راستای محور موردنظر را تعیین می کند و معمولا ارگومان هایی مانند flex-start یا flex-end یا space-between و space-around و space-evenly را دریافت می کند.
Align-items: شیوه نمایش تمام آیتم هایی که در راستای محور موردنظر تعیین می کند.
Align-content: نحوه راستچین یا چپ چین و فواصل بین المان ها را تعیین می کند.
Align-self: وضعیت هر المان را به صورت اختصاصی (مجزا) بررسی می کند.
Order: ترتیب قرارگیری المان ها در کنار یکدیگر را تعیین می کند.
Flex: نوع نمایش المان ها را به همراه محور قرارگیری آنها، تعیین می کند.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.