یادگیری و آموزش flexbox در ۳۰ گام - قسمت اول

گام ۱: مقدمه

قبل از Flexbox ، ما عمدتا از float برای layout استفاده می کردیم و برای آن دسته از توسعه دهندگان CSS، همه ما مشکلات و محدودیت های روش قدیمی را می شناسیم، خصوصاً توانایی وسط چین کردن به صورت عمودی درون parentهای آنها که واقعا آزار دهنده بود! اما با Flexbox همه این مشکلات برطرف شده است.

Code Snippet of Day 1: Introduction

گام ۲: Flex Container و Flex Items

برای اینکه Flexbox کار کند، باید رابطه Parent-Child را ایجاد کنید. والدین flex container هستند و هر چیزی که در آنها قرار می گیرد، children یا flex  items هستند.

Code Snippet of Day 2: Flex Container & Flex Items

گام ۳: فقط child بدون واسطه

یک نکته بسیار مهم که می خواهم به آن اشاره کنم این است که flex container فقط در اطراف children نزدیک خود عمل می کند. flex container بیش از عمق یک لایه عمل می کند. فقط children بلا واسطه. بنابراین رابطه نوه یا نتیجه وجود ندارد. فقط Parent ↔ Children بلا واسطه!

البته تا زمانی که رابطه parent-child برقرار باشد می توانید Flexbox را ایجاد کنید. بنابراین child همچنین می تواند flex container برای فرزندان خود باشد. اما این یک flex container جداگانه خواهد بود. و ویژگی های flex مربوط به parent خود را منتقل نمی کند.

این احتمالاً یکی از مهمترین مفاهیمی است که به من کمک کرده است عملکرد Flexbox را درک کنم. و دانستن این مسئله به حل بسیاری از لحظاتی که می شنویم "چرا این کار نمی کند" کمک می کند.

Code Snippet of Day 3: Immediate Child Only

گام ۴: محور های Flexbox

Flexbox در یک سیستم 2 محوره کار می کند: محور اصلی و متقاطع. محور اصلی جهتی است که نحوه قرارگیری آیتم های flex شما در flex container است. تعیین محور متقاطع بسیار ساده است، این محور در جهتی است که عمود بر محور اصلی شما قرار می گیرد.

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

Code Snippet of Day 4: Flexbox Axes

گام ۵: ماژول Flexbox

بیایید روی یکی از طرح ها zoom کنیم و آناتومی Flexbox خود را بررسی کنیم. در هر محور، یک شروع و یک پایان وجود دارد. اگر در محور اصلی باشد، موقعیت شروع را main start و اگر موقعیت در انتها باشد آن را main end بنامیم. همین مفهوم در مورد محور متقاطع نیز صدق می کند. دانستن شروع و پایان محورها بسیار مهم است زیرا شما می توانید مکان قرارگیری آیتم های  flex خود را کنترل کنید.

و اینجا اصول Flexbox به پایان می رساند..

Code Snippet of Day 5: Flexbox Module

گام ۶: خصوصیات Parent

اکنون می دانید که Flex در روابط Parent-Child عمل می کند. بنابراین برای شروع این بخش، درگیر 2 موجودیت هستیم. و هر موجودیت مجموعه خصوصیت های CSS خود را دارد که می تواند روی آنها اعمال شود. به همین دلیل مهم است که شما بدانید کدام عنصر parent و کدام عناصر child هستند. بیایید با خصوصیات parent شروع کنیم.

Code Snippet of Day 6: Parent Properties

گام ۷: Display

برای شروع این یادگیری Flexbox، ابتدا باید flex container خود را ایجاد کنیم. این کار با استفاده از ویژگی flex در عنصر parent انجام می شود. خب، در حال حاضر تمام فرزندان بدون واسط آن هم به آیتم های flex تبدیل می شوند.

2 نوع flex container وجود دارد: flex یک flex container سطح block ایجاد می کند و inline-flex یک flex container سطح inline ایجاد می کند. اطلاعات بیشتر در مورد Block و Inline را در گام بعدی می خوانید.


.parent {
  display: flex /* default */
        or inline-flex
}

Code Snippet of Day 7: Display

گام ۸: block و inline

خیلی ساده توضیح می دهم، عنصر block کل عرض container را اشغال می کند. آنها مانند بلوک های ساختمانی هستند که هر بلوک روی یکدیگر چیده شده است. در حالی که عنصر inline فقط فضای مورد نیاز را اشغال می کند. بنابراین به نظر می رسد که آنها در یک خط یا در کنار یکدیگر قرار دارند.

Code Snippet of Day 8: block vs inline

گام ۹: flex-direction

این خاصیتی است که به ما امکان می دهد محور اصلی خود را تعریف کنیم. به یاد داشته باشید که ذکر کردم محور اصلی ما می تواند افقی یا عمودی باشد. بنابراین اگر می خواهیم محور اصلی افقی باشد، به آن row می گویند. و اگر می خواهیم عمودی باشد، column نامیده می شود. همچنین، به یاد داشته باشید که ما یک main start و main end داشتیم. ما به سادگی می توانیم با اضافه کردن یک پسوند reverse بیایم "main start" خود را در جهت معکوس تنظیم کنیم.


.parent {
  flex-direction: row /* default */
               or row-reverse
               or column
               or column-reverse
}

Code Snippet of Day 9: flex-direction

گام ۱۰: flex-wrap

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

این ویژگی همان چیزی است که به شما امکان می دهد آیتم های flex موجود در container شما بیش از یک خط را اشغال کند..


.parent {
  flex-wrap: nowrap /* default */
          or wrap
          or wrap-reverse
}

Code Snippet of Day 10: flex-wrap

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: