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

گام ۱۱: flex-flow

خب ما flex-direction و flex-wrap را یاد گرفته ایم. اگر آن 2 را فهمیده اید، پس flex-flow را هم می دانید! زیرا فقط یک اختصار برای این دو ویژگی است

می توانید هر دو ویژگی را همزمان تنظیم کنید. یا می توانید فقط یکی از آنها تنظیم کنید. مقدار پیش فرض row nowrap است. بنابراین اگر فقط یک مقدار تنظیم کنید، ویژگی که تنظیم نکرده اید مقدار پیش فرض را خواهد داشت.

.parent {
  flex-flow: row nowrap /* default */
          or flex-direction flex-wrap
          or flex-direction
          or flex-wrap
}

Code Snippet of Day 11: flex-flow

گام ۱۲: justify-content [row]

خب به جاهای قشنگش رسیدیم. این ویژگی alignment را در امتداد محور اصلی تنظیم می کند. در این مثال، محور اصلی به صورت افقی است. به عبارت دیگر، جهت flex روی row تنظیم می شود.

این احتمالاً پرکاربردترین ویژگی parent است. شما فقط کافی است طرح مورد علاقه خود را انتخاب کنید و می بینید که Flexbox ادامه کار را برای شما انجام می دهد. و کاملاً پاسخگوی نیاز شما می باشد. با بزرگ شدن (grow) یا کوچک شدن (shrink) عرض پنجره، Flexbox محاسبه پشت صحنه را انجام داده و از حفظ طرح انتخابی شما اطمینان حاصل می کند. این مانند یکی از آن لوازم آشپزخانه است که "آن را تنظیم می کنید و خودش کارش را تا پایان انجام می دهد."

.parent {
  justify-content: flex-start /* default */
                or flex-end
                or center
                or space-around
                or space-between
                or space-evenly
}

Code Snippet of Day 12: justify-content [row]

 

گام ۱۳: justify-content [column]

محور اصلی همچنین می تواند به صورت عمودی هم قرار بگیرد. در این حالت، جهت flex روی column تنظیم می شود. در اینجا نحوه تراز شدن آیتمهای flex به صورت نمونه آورده شده است.

.parent {
  flex-direction: column;

  justify-content: flex-start /* default */
                or flex-end
                or center
                or space-around
                or space-between
                or space-evenly
}

Code Snippet of Day 13: justify-content [column]

گام ۱۴: space-around و space-evenly

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

Code Snippet of Day 14: space-around vs space-evenly

گام ۱۵: align-items [row]

بنابراین justify-content نحوه چیدمان آیتم ها در محور اصلی را کنترل می کند. اما در مورد چیدمان آنها در محور متقاطع چطور؟ نگران نباشید، اینجاست که align-items وارد می شوند. به یاد داشته باشید که محور متقاطع همیشه عمود بر محور اصلی است. بنابراین اگر محور اصلی به صورت افقی باشد، جایی که flex-direction مقدار row داشته باشد، محور متقاطع به صورت عمودی است. ما تقریباً یک هفته در مورد مبانی اساسی وقت صرف کردیم و این دانش اکنون قابل استفاده است.

.parent {
  align-items: stretch /* default */
            or flex-start
            or flex-end
            or center
            or baseline
}
Code Snippet of Day 15: align-items [row]

گام ۱۶: baseline

داستان baseline کمی پیچیده است. بنابراین بهتره اول مطمئن شویم که چی هست. baseline با تایپوگرافی یا متن ارتباط دارد. baseline یک خط فرضی است که متن بر روی آن نشسته است. اگر اندازه قلم (font-size) یکسانی داشته باشید، از نظر بصری تفاوتی نمی بینید. با این وجود وقتی اندازه قلمهای مختلفی داشته باشید، متن به نظر می رسد در همه جا وجود دارد زیرا baseline خاموش است. یک روش برای اطمینان از اینکه یک baseline یکنواخت موجود باشد که در آن اندازه های مختلف متن روی آن قرار بگیرند، استفاده از مقدار baseline است.

Code Snippet of Day 16: baseline

گام ۱۷: align-items [column]

حالا بیایید یک نگاهی بیندازیم که اگر محور متقاطع به صورت افقی باشد، چطور آیتمهای flex ما align می شوند. به عبارت دیگر، flex-direction ستونی باشد.

.parent {
  flex-direction: column;

  align-items: stretch /* default */
            or flex-start
            or flex-end
            or center
            or baseline
}
Code Snippet of Day 17: align-items [column]

گام ۱۸: align-content

به یاد داشته باشید که ما flex-wrap را داشتیم که اجازه می داد آیتم های flex روی خطوط جداگانه wrap شوند. پس، با align-content می توانیم نحوه تراز شدن آن ردیف از آیتم ها بر روی محور متقاطع را کنترل کنیم. از آنجا که این مورد فقط برای موارد wrapped است، اگر فقط یک خط واحد از آیتم های flex داشته باشید، این خاصیت هیچ تأثیری نخواهد داشت.

.parent {
  align-content: stretch /* default */
              or flex-start
              or flex-end
              or center
              or space-between
              or space-around
}
Code Snippet of Day 18: align-content

گام ۱۹: Child Properties

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

Code Snippet of Day 19: Child Properties

گام ۲۰: order

به طور پیش فرض، آیتم های flex به همان ترتیب که در کد شما هستند، نمایش داده می شوند. اما اگر می خواهید آن را تغییر دهید چه؟ مشکلی نیست، از ویژگی order برای تغییر ترتیب موارد خود استفاده کنید.

.child {
  order: 0 /* default */
      or 
}
Code Snippet of Day 20: order
سعید نصیری
سعید نصیری

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

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