عناصر فرزند (آیتم‌ها) عناصر فرزند مستقیم یک کانتینر فلکس به طور خودکار به آیتم‌های فلکس تبدیل می‌شوند.
مثال
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>خواص آیتم‌های فلکس عبارتند از:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
خاصیت order
خاصیت order ترتیب نمایش آیتم‌های فلکس را مشخص می‌کند.
اولین آیتم فلکس در کد لزوماً نباید به عنوان اولین آیتم در طرح‌بندی نمایش داده شود.
مقدار خاصیت order باید یک عدد باشد. مقدار پیش‌فرض آن ۰ است.
مثال
خاصیت order می‌تواند ترتیب نمایش آیتم‌های فلکس را تغییر دهد:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>خاصیت flex-grow
خاصیت flex-grow مشخص می‌کند که یک آیتم فلکس چقدر نسبت به سایر آیتم‌ها رشد می‌کند.
مقدار این خاصیت باید یک عدد باشد و مقدار پیش‌فرض آن ۰ است.
مثال
آیتم فلکس سوم را هشت برابر سریع‌تر از سایر آیتم‌ها رشد دهید:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>خاصیت flex-shrink
خاصیت flex-shrink مشخص می‌کند که یک آیتم فلکس چقدر نسبت به سایر آیتم‌ها کوچک می‌شود.
مقدار این خاصیت باید یک عدد باشد و مقدار پیش‌فرض آن ۱ است.
مثال
اجازه ندهید آیتم فلکس سوم به اندازه سایر آیتم‌ها کوچک شود:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>خاصیت flex-basis
خاصیت flex-basis طول اولیه یک آیتم فلکس را مشخص می‌کند.
مثال
طول اولیه آیتم فلکس سوم را به ۲۰۰ پیکسل تنظیم کنید:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>خاصیت flex
خاصیت flex یک خاصیت ترکیبی برای تنظیم flex-grow، flex-shrink و flex-basis است.
مثال
آیتم فلکس سوم را بدون قابلیت رشد (0)، بدون قابلیت کوچک شدن (0)، و با طول اولیه ۲۰۰ پیکسل تنظیم کنید:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>خاصیت align-self
خاصیت align-self تنظیم تراز آیتم فلکس را به صورت جداگانه در کانتینر فلکس مشخص می‌کند.
این خاصیت تنظیم تراز پیش‌فرض که توسط خاصیت align-items کانتینر مشخص شده است را نادیده می‌گیرد.
مثال
آیتم فلکس سوم را در وسط کانتینر تنظیم کنید:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>مثال
آیتم فلکس دوم را در بالای کانتینر و آیتم فلکس سوم را در پایین کانتینر تنظیم کنید:
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام