- آموزش FlexBox قسمت اول
- آموزش FlexBox قسمت دوم
این قسمت در تکمیل آموزش 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-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 تعیین شود:
این خاصیت پنج حالت دارد، در تصویر فوق به هر آیتم یک خاصیت دادیم که در پایین این خاصیتها را میبینید:
one: خاصیت center
two: خاصیت stretch
three: خاصیت flex-end
four: خاصیت flex-start
five: خاصیت baseline
امیدوارم از این آموزش استفاده کافی را برده باشید.