CSS Flexbox (جلسه سوم): Flex Items و خاصیت(property)های مربوط به آن

- visibility ۳ mode_comment

به نام یگانه هستی بخش

 با سلام خدمت دوستان عزیز سون‌لرنی. در جلسه قبلی در به برسی خاصیت های مربوط به flex container پرداختیم. در این جلسه درباره ی flex items و خاصیت های مربوط به آن صحبت میکنیم.

Flex items

css-flexbox-preview

flex-grow

این خاصیت توانایی بزرگ شدن یک آیتم را تعیین میکند. این خاصیت یک مقدار عددی بدون واحد میپذیرد. مقدار پیشفرض آن 0 است؛ یعنی آیتم‌ها توانایی بزرگ شدن را ندارند. در صورتی که flex container فضای خالی داشته باشد و به یک آیتم flex-grow: 1; بدهید، آن آیتم تا جایی بزرگ میشود که فضای خالی درون container از بین برود.

دقت داشته باشید که هنگامی که خاصیت flex-direction فلکس container برابر row باشد، flex-grow بر عرض(width) آیتم اعمال میشود و اگر مقدار آن خاصیت برابر column باشد، flex-grow بر ارتفاع(height) اعمال میشود.

flex-grow

اگر به همه ی فلکس آیتم ها flex-grow: 1; بدهید، همه ی آنها به یک اندازه بزرگ میشوند. اگر در همین حالت مقدار flex-grow یکی از آیتم هارا 2 قرار دهید، آن آیتم 2 برابر دیگر آیتم خا خواهد شد.

flex-shrink

این خاصیت توانایی کوچک شدن یک آیتم را در صورت لزوم تعیین میکند. مقدار پیشفرض آن 1 است، یعنی آیتم ها میتوانند کوچک شوند. اگر خاصیت flex-wrap فلکس container برابر nowrap باشد، آیتم ها تا زمانی که عرضشان به 0 برسد کوچک میشوند. حال اگر در این صورت مقدار flex-shrink یکی از آیتم ها را برابر 2 قرار دهیم، آن آیتم 2 برابر دیگر آیتم ها کوچک میشود.

flex-shrink

 

flex-basis

این خاصیت مقدار پایه ی عرض یا ارتفاع آیتم را تعیین میکند. یعنی عرض یا ارتفاع(به ستونی یا ردیفی بودن آیتم ها بستگی دارد) از این مقدار پایه نمیتواند کمتر شود. این خاصیت مانند min-height و min-width عمل میکند. مقدار پیشفرض این خاصیت auto می باشد، یعنی فلکس آیتم ها میتوانند تا جایی کوچک شوند که عرض یا اتفاع آنها به صفر برسد.

flex

این خاصیت یک مختصر نویسی برای خاصیت های flex-grow ، flex-shrink و flex-basis میباشد.

مقادیر دوم و سوم (flex-shrink و flex-basis)  اختیاری هستند.

order

این مقدار میتواند مکان قرار گیری فلکس آیتم در کنار دیگر فلکس ایتم ها را مشخص کند. مقدار پیشفرض 0 است. اگر تنها مقدار order یکی از فلکس آیتم هارا تعیین کنید، آن آیتم بعد از تمامی آیتم ها قرار میگیرد، ولی اگر این خاصیت را برای همه ی فلکس ایتم ها تعریف کنید، میتوانید جایگاه قرار گیری فلکس آیتم هارا مشخص کنید. این خاصیت یکی از کاربردی ترین خاصیت ها هنگام طراحی واکنش‌گرا(responsive) هست.

order

align-self

مقدار پیشفرض این خاصیت مقدار تعیین شده برای خاصیت align-items (خاصیت مربوط به flex container) میباشد. با استفاده از این خاصیت میتوان نحوه ی قرار گرفتن عمودی(در محور عرضی یا cross axis) قلکس آیتم هارا فردی کرد. مقادیر این خاصیت مانند مقادیر خاصیت align-items است.

align-self

 

 

خاصیت های مربوط به flex items نیز به پایان رسید. حالا میخواهیم با استفاده از فلکس باکس یک صفحه ی واکنش‌گرا ساده طراحی کنیم.

یک صفحه ی واکنش‌گرا با استفاده از Flexbox

کد های HTML:

و کدهای CSS:

همونطور که دیدید به آسونی نحوه ی چیدمان آیتم هارا با استفاده از فلکس باکس تعیین کردیم.

این جلسه هم اینجا به پایان رسید. امیدوارم براتون مفید باشه.

موفق باشید.

comment دیدگاه کاربران
na3r

ٌWow ! این CSS Flexbox واقعا جذابه ..! لطفا ادامه بدین!

علی امینی

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

حسین حسنی

سلام آقای امینی نمیشه مطالب کاربردی مربوط به flexbox رو هم آموزش بدین؟تشکر میکنم بابت آموزش خوبتون.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.