قسمت های دیگر این مطلب:

این قسمت در تکمیل آموزش FlexBox ارائه شده است.

در این درس از سورس نمونه زیر استفاده می‌شود:

<html>
<head>
	<style>
		.my_flex_container{
			padding: 20px;
			background-color: #0e9596;
			display: flex;
			flex-direction: row;
		}
		.my_flex_item{
			background-color: #fff;
			padding: 20px;
			font-size: 30px;
			margin:5px;
			border:1px solid #000;
		}
	</style>
</head>
<body>
	<div class="my_flex_container">
		<div class="my_flex_item">One</div>
		<div class="my_flex_item">Two</div>
		<div class="my_flex_item">Three</div>
		<div class="my_flex_item">Four</div>
	</div>
</body>
</html>

خاصیت flex-grow

این خاصیت به flex item‌ها اختصاص داده می‌شود. به صورت پیش فرض flex-grow تمام آیتم‌ها برابر صفر است.

اگر به تمام عناصر flex item این خاصیت را داده و مقدار آن را یک قرار بدهیم، تمام فضای container پر شده و همه وسط چین می‌شوند:

flex

اما اگر این خاصیت را تنها به یکی داده و به آن مقدار یک بدهیم، آن یک آیتم کل فضا را به خود اختصاص می‌دهد:

flex

اگر همه آیتم‌ها flex-grow برابر یک داشته باشند و به یکی flex-grow بیشتر از یک بدهیم، به نسبت اندازه‌ای که از یک بیشتر باشد، آن آیتم فضای بیشتری را به خود اختصاص می‌دهد:

flex grow

خاصیت flex-basis

این خاصیت به آیتم‌ها یک اندازه پایه اختصاص می‌دهد. اگر در حالت flex-direction:row باشیم این خاصیت عرض آیتم و در صورتی که در حالت column باشیم ارتفاع آیتم را مشخص می‌کند.

عملکرد این خاصیت زمانی مشخص می‌شود که به آیتم‌ها flex-grow بدهیم، حتی اگر آیتمی که flex-grow‌ای بالاتر از آیتم ما داشت عرض آن کمتر از flex-basis نخواهد شد.

خاصیت flex-shrink

 به صورت پیشفرض این خاصیت برابر یک است، ولی اگر آن را ویرایش کنیم و به عددی بزرگتر از یک تبدیل کنیم، هر چه آیتمی flex-shrink بزرگتری داشته باشد به همان نسبت آن آیتم بیشتر کوچک می‌شود.

نکته: flex-shrink با حضور flex-basis عمل می‌کند.

 خاصیت flex

این خاصیت سه آیتم فوق را در خود جای می‌دهد، بنابراین سه ورودی می‌گیرد که ورودی اول برای تنظیم flex-grow، ورودی دوم برای تنظیم flex-basis و ورودی سوم برای تنظیم flex-shrink می‌باشد.

خاصیت order

 این خاصیت به آیتم‌ها اولویت می‌دهد. مثلا اگر به یک آیتم order:1;  بدهیم حتما در سمت راست ترین بخش آیتم‌ها قرار می‌گیرد.

مقدار order به صورت پیشفرض برای تمام آیتم‌ها صفر است.

البته به آیتم‌ها می‌توان مقادیر منفی نیز داد، که هر چه مقدار کوچکتر باشد آیتم سمت چپ تر خواهد بود.

خاصیت align-self

این خاصیت باعث می‌شود که موقعیت عناصر در یک container تعیین شود:

flex-self

 این خاصیت پنج حالت دارد، در تصویر فوق به هر آیتم یک خاصیت دادیم که در پایین این خاصیت‌ها را می‌بینید:

one: خاصیت center

two: خاصیت stretch

three: خاصیت flex-end

four: خاصیت flex-start

five: خاصیت baseline

امیدوارم از این آموزش استفاده کافی را برده باشید.