Flexbox را یاد بگیریم!

وقتی ریدیزاین و پیاده سازی وبلاگ جدیدم را شروع کردم (که به زودی راه اندازی میشه) قبلا به خاطر مشغله کاری فرصت نشده بود Flexbox را مطالعه کنم تصمیم گرفتم وبلاگم را با استفاده از این ساختار جدید css پیاده سازی کنم و از طرفی طی یک مقاله نحوه کار و یادگیری آن را آرشیو کنم.

انگیزه یادگیری Flexbox از ویدیو‌های آموزشی Jeffrey Way با عنوان
Learn Flexbox Through Examples
ایجاد شد و با مثال‌های جذابی که دیدم تصمیم گرفتم کامل این مبحث را یاد بگیرم.

در این مقاله در رابطه با موضوعات مختلف Flexbox صحبت می‌کنیم در مورد تگ‌های والد (the flex container) و آیتم‌های زیر مجموعه آنها (the flex items) نکات مختلف را می‌نویسیم.

هدف Flexbox Layout مهیا کردن یک روش کارآمد و موثر برای مدیریت Box Layoutها است روشی برای تراز و توزیع آیتم‌ها در باکس‌هایی که طول و عرض آنها یا درحال تغییر است و یا نامشخص است. (واژه Flex در واقع به همین معنای انعطاف‌پذیری است)

ایده‌ای که برای flex مطرح است این است که قابلیتی را به container می‌دهد تا عرض/ارتفاع آیتم‌ها را به نحوی تغییر دهد که بهترین استفاده را از فضاهای خالی در دسترس داشته باشد. ( نمایش آنها را با صفحه نمایش تطبیق می‌دهد) یک flex container آیتم‌ها را برای استفاده از فضاهای خالی توزیع می‌کند و یا برای پیشگیری از سرریز شدن سایز آنها را کاهش می‌دهد.

نکته بسیار مهم در Flexbox این است که بر خلاف طراحی و سبک معمولی که باکس‌ها در ردیف‌های افقی کنارهم قرار می‌گیرند و یا در حالت inline به صورت ستونی در کنارهم قرار می‌گیرند، کاملا انعطاف پذیر است.( مخصوصا برای حالتهای مختلف جابجایی، ریسپانسیو، توزیع یکسان در حالتهای عمودی و افقی و … )

Flexbox تنها یک property نیست بلکه مجموعه‌ای از propertyهاست که با استفاده از آنها می‌توانیم انعطاف پذیری زیادی را به پروژه خود اضافه کنیم. برخی از این ویژگی‌ها به container اعمال می‌شوند ( parent element, known as “flex container” ) و برخی از آنها به زیرمجموعه آنها یعنی childrenهای یک تگ اعمال می‌شوند. (flex items)

در حالت معمولی المان‌هایی که در صفحه‌ داریم به صورت یکی از دو حالت block یا inline هستد (block and inline flow directions) ولی در حالت flexbox این المان‌ها بر اساس flex-flow directions هستند. برای درک flexbox در ادامه مقاله تصویر زیر کمک زیادی میکند.

Flexbox Attributes

بعد از توضیحاتی که تا الان ذکر کردیم شروع به توضیح بخش‌های مختلف flexbox میکنیم.

display

با استفاده از display به صورت نمونه کد زیر container را آماده می‌کنیم که فرزندهای مستقیم آن felx itemهای آن قرار گیرند.( It enables a flex context for all its direct children)

.container {
  display: flex; /* or inline-flex */
}

flex-direction

با استفاده از این ویژگی یک main-axis ایجاد می‌شود که direction آیتم‌های داخل container را مشخص می‌کند. به این فکر کنید که میخواهید آیتم‌های داخل container به صورت افقی یا عمودی قرار بگیرند و direction آنها به چه صورت باشد.

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

row: افقی چپ به راست وقتی که direction: ltr باشد. (پیشفرض) وقتی که direction:rtl باشد راست به چپ است.

row-reverse: افقی راست به چپ وقتی که direction:ltr باشد. در حالتیکه direction:rtl باشد آیتم‌ها چپ به راست هستند.

column: مشابه row است با این تفاوت که آیتم‌ها به صورت ستونی از بالا به پایین هستند.

column-reverse: مشابه row-reverse است با این تفاوت که آیتم‌ها به صورت ستونی از پایین به بالا قرار می‌گیرند.

flex-wrap

به صورت پیشفرض آیتم‌های flexbox به این صورت هستند که در یک ردیف قرار بگیرند. ولی میتوان آن را تغییر داد و در چندین ردیف قرار بگیرند و یا اینکه از پایین به بالا به صورت عمودی قرار گیرند.

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

flex-flow

یک shortkey برای اعمال ویژگی‌های flex-direction و flex-wrap است. به صورت پیشفرض مقدار row nowrap را می‌گیرد. flex-flow برای parent یعنی flex-container اعمال می‌شود.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

این property وضعیت قرارگیری المان‌ها در main-axis را مشخص می‌کند. این ویژگی کمک می‌کند تا فضاهای خالی موجود در container به صورت مناسب برای قرارگیری آیتم‌ها توزیع شود و در برخی موارد کنترل بیشتری روی آیتم‌ها اعمال می‌کند در مواقعی که از یک ردیف خارج می‌شوند.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start: آیتم‌ها در ابتدای ردیف قرار می‌گیرند. (پیشفرض)

flex-end: آیتم‌ها در انتهای ردیف قرار می‌گیرند.

center: آیتم‌ها در مرکز ردیف موردنظر قرار می‌گیرند.

space-between: آیتم‌ها با فاصله مساوی در یک ردیف توزیع می‌شوند. آیتم اول در ابتدای ردیف و آیتم آخر در انتهای ردیف قرار می‌گیرد.

space-around: آیتم‌ها با ایجاد فاصله‌های مساوی در اطرافشان، در یک ردیف توزیع می‌شوند. توجه کنید که وقتی به تصویر نگاه کنید متوجه می‌شوید که فاصله بین آیتم‌ها یکسان نیست چونکه هر آیتم در اطراف خود یک فاصله مشخص دارد و وقتی دو آیتم در کنار هم قرار میگیرند هر کدام یک فاصله برای خود دارند و آیتمی که در ابتدا و انتهای ردیف قرار دارند از ابتدا و انتها فقط یک فاصله دارند.

space-evenly: آیتم‌ها با فاصله‌های کاملا مساوی در یک ردیف توزیع می‌شوند. در این حالت فاصله‌ها در تمام بخش‌ها یکسان است.

align-items

با استفاده از این property رفتار آیتم‌ها در ردیف موردنظر را در حالت cross axis تعریف می‌کنیم. align-items در واقع شبیه به justify-content است با این تفاوت که align-items در حالت عمودی(cross axis) اعمال می‌شود ولی justify-content در حالت افقی (main axis) اعمال می‌شود.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch: آیتم‌ها را به اندازه‌ای که container را پر کند تغییر می‌دهد.(پیشفرض)

flex-start: آیتم‌ها را در ابتدای ستون در مکان cross-start قرار می‌دهد.

flex-end: آیتم‌ها را در انتهای ستون در مکان cross-end قرار می‌دهد.

center: آیتم‌ها بر اساس cross-axis در مرکز ستون قرار می‌گیرند.

baseline: آیتم‌ها بر اساس خطوط اصلی آنها در یک راستا قرار می‌گیرند.

align-content

این property تمام آیتم‌ها را بر اساس ردیف‌هایی که در container وجود دارد (فضاهای خالی اضافی) در حالت cross-axis بر اساس مقدار آن تنظیم می‌کند.

نکته: در حالتی که ما برای آیتم‌های موجود یک ردیف داشته باشیم این property بی‌تاثیر است.

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

تا به اینجا در رابطه با ویژگی‌هایی که برای flex-container تعریف می‌شود صحبت کردیم، اکنون ویژگی‌هایی که برای flex-items تعریف می‌شوند را مورد بررسی قرار می‌دهیم.

order

به صورت پیشفرض آیتم‌هایی که در flex-container قرار می‌گیرند به ترتیبی که ایجاد می‌شوند قرار می‌گیرند ولی با این وجود می‌توان برای آنها ترتیب اولویت تعریف کرد.

.item {
  order: ; /* default is 0 */
}

flex-grow

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

در صورتیکه همه آیتم‌های flex-container مقدار flex-grow:1 داشته باشند در واقع تمام آیتم‌های به میزان کاملا یکسان در فضای خالی توزیع می‌شوند. اگر یکی از آیتم‌ها مقدار ۲ داشته باشد دوبرابر بقیه فضا را در اختیار خواهد داشت.(عدد منفی نامعتبر است.)

.item {
  flex-grow: ; /* default 0 */
}

flex-shrink

این property این قابلیت را تعریف می‌کند که بتوانیم آیتم‌های flex-container را در صورت لزوم به میزانی که لازم است فضایی که اشغال می‌کنند را کوچکتر کند. (عدد منفی نامعتبر است.)

.item {
  flex-shrink: ; /* default 1 */
}

flex-basis

این property مقدار سایز پیشفرض یک آیتم را تعریف می‌کند قبل از آنکه فضای باقی مانده بین آیتم‌ها توزیع شود. مقادیر این property میتواند عدد (۱۵%, ۴rem, etc) و یا یکسری از کلمات کلیدی باشند. کلمه کلیدی auto تعیین می‌کند که بر اساس عرض و ارتفاع آیتم به آن فضا داده شود.

.item {
  flex-basis:  | auto; /* default auto */
}

در صورتیکه مقدار آن را ۰ قرار دهیم فضای خالی که اطراف content وجود دارد حذف می‌شود و در صورتیکه مقدار آن را auto قرار دهیم فضای خالی اطراف آن به اندازه flex-grow توزیع خواهد شد.

https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg

flex

این property در واقع shortkey برای قرار دادن مقادیر flex-grow, flex-shrink و flex-basis است. مقادیر flex-shrink و flex-basis اختیاری است. و مقدار پیشفرض آن ۰ ۱ auto است.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

این property این اجازه را می‌دهد که یک آیتم مقدار پیشفرضی که برای آن تعریف شده است را overrideکند و مقدار جدیدی را بگیرد. مقادیری که میگیرد به صورت زیر است.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

توجه کنید که clear, float و vertical-align هیچ تاثیری روی flex-item ندارند.

در نهایت پیشنهاد میکنم سایت bennettfeely را برای تست حالتهای مختلف flexbox مشاهده کنید.

مطالعه بیشتر:

انتشار اولین مطلب در Symphony – قسمت ۱

در مقاله قبل در رابطه با مسیردهی صفحات صحبت کردیم و بخش دیزاین آن را با یک قالب آماده به طور کامل پیاده سازی کردیم. در این مقاله قصد دارم اولین مطلب خودمون رو منتشر کنیم و با نحوه ثبت داده در فریمورک سیمفونی آشنا شویم.

ادامه خواندن انتشار اولین مطلب در Symphony – قسمت ۱

پیاده سازی صفحات bundle و مسیردهی آنها

در مقاله‌ قبل ( ساخت bundle جدید در Symfony ) با استفاده از دستورات  console به راحتی یک bundle جدید ایجاد کردیم، با توجه به اینکه در قسمت سوم مقاله ( بخش view در symfony ) در رابطه با view صحبت کرده بودیم و ساختار کلی view  را پیاده سازی کردیم در این قسمت سایر بخش‌های view و صفحات و جزئیات آن را پیاده سازی می‌کنیم.

ادامه خواندن پیاده سازی صفحات bundle و مسیردهی آنها

ساخت bundle جدید در Symfony

در مقاله قبل در رابطه با ساختار viewها در سیمفونی صحبت کردیم و یک قالب وبلاگی را مطابق Twig template engine پیاده سازی کردیم. با توجه به اینکه قصد داریم در این پروژه آزمایشی صرفا یکسری مطالب را اضافه کنیم یک bundle جدید به نام BlogBundle ایجاد می‌کنم و ادامه کار را با هم پیش میبریم.

ادامه خواندن ساخت bundle جدید در Symfony

بخش view در symfony

در مقاله قبل در رابطه با مقدمات و آشنایی اولیه با ساختار سیمفونی صحبت کردم در این مقاله بخش view  آن را با هم بررسی می‌کنیم.

Symfony برای مدیریت قالب‌ها از یک Template Engine به نام Twig استفاده می‌کند که کار مدیریت و پیاده سازی ساختارهای قالب را به طرز فوق العاده ای بهتر و آسانتر کرده است. اگر مقاله قبل را خوانده باشید متوجه می‌شوید که TwigBundle در ابتدا در فایل AppKernel  لود می‌شود.

ادامه خواندن بخش view در symfony

آشنایی اولیه با فریمورک Symfony

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

Symfony structure version 3.3
ادامه خواندن آشنایی اولیه با فریمورک Symfony

سلام Symfony

با توجه به اینکه من قبلا با لاراول شروع به کار کردم و از آن لذت زیادی بردم و از آنجایی که میدونستم که لاراول بسیاری از بخش‌های خودش رو از Symfony دریافت می‌کنه تمایل زیادی داشتم که کار با سیمفونی رو امتحان کنم تا ببینم چقدر میتونم ازش لذت ببرم! در این مقاله با هم سیمفونی رو نصب می‌کنیم و یکسری مقدمات اولیه را اینجا آرشیو میکنم 🙂 

ادامه خواندن سلام Symfony

gitflow راهکاری فوق العاده برای مدیریت پروژه

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

اما موضوعی که در این مقاله میخواهم در رابطه با آن صحبت کنم، تعریف یک مدل یا Road map برای مدیریت یک پروژه روی ورژن کنترلی مثل گیت است.

اگر قبلا تجربه کار کردن به صورت تیم را داشته باشید حتما به مشکلاتی همچون Merge Conflict و تداخل و همزمانی توسعه ویژگی‌ها و… برخورد کردید که گاهی وقتها وقت زیادی رو از ما میگیره تا برنچ‌های مختلف را با هم ادغام و در نهایت Deploy کنیم. 

Git Flow  یک ‌Branch Model است یا بهتره بگم یه مفهوم برای مدیریت برنچ‌ها و تیم توسعه است که بدون مشکل بتوانیم پروژه‌هایمان را توسعه دهیم و به صورت همزمان بتوانیم Feature هایی که میخواهیم را به بخش‌های مختلف پروژه اضافه کنیم بدون اینکه استرسی بابت مرج و لانچ بخش‌های مختلف داشته باشیم.

ادامه خواندن gitflow راهکاری فوق العاده برای مدیریت پروژه

خطایابی و Debug کردن برنامه‌ها در php

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

در صورتیکه از فریمورک‌هایی همچون Laravel استفاده کنیم نیاز به فعالسازی نمایش خطاها نیست و کافی است در فایل تنظیمات فریمورک آن را اکتیو کنیم ولی گاهی وقتها در برنامه‌های که نسبت به دیباگ آنها اقدام میکنیم از فریمورک خاصی استفاده نشده است پس لازم است بدانیم چطور خطاها را نمایش و دیباگ کنیم. 

ادامه خواندن خطایابی و Debug کردن برنامه‌ها در php

آماده سازی مک برای یک برنامه نویس

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

Homebrw

معمولا یک برنامه نویس از محیط ترمینال لذت میبره و اگر با لینوکس کار کرده باشید با استفاده از سیستم پکیج کنترلی که داره میتونید همه برنامه های مورد نیازتون رو نصب کنید و … برای همچین امکانی از homebrewاستفاده میکنیم.

قبلا مقاله در رابطه با معرفی پکیج منیجر home brew نوشتم که میتوانید آن را مطالعه کنید.

ادامه خواندن آماده سازی مک برای یک برنامه نویس