قالب مدیریتی شاهین فالکون | پیشخوان & اپلیکیشن تحت وب

فلکس

با مجموعه کاملی از ابزارهای فلکس باکس پاسخگو، به سرعت چیدمان، تراز، و اندازه ستون های شبکه، ناوبری، اجزا و موارد دیگر را مدیریت کنید. برای پیاده سازی های پیچیده تر، CSS سفارشی ممکن است لازم باشد.

فلکس در بوت استرپ

رفتارهای انعطاف پذیر

از ابزارهای display کاربردی برای ایجاد یک ظرف فلکس باکس و تبدیل عناصر مستقیم کودکان به آیتم های انعطاف پذیر استفاده کنید. ظروف و اقلام فلکس را می توان با ویژگی های انعطاف پذیر اضافی اصلاح کرد.

ظرف فلکس باکس!

ظرف فلکس باکس درون خطی!

<div class="d-flex p-2 bg-200 mb-2">Flexbox container!</div>
<div class="d-inline-flex p-2 bg-200">Inline flexbox container!</div>

ردیف جهت

برای .flex-row تنظیم یک جهت افقی (پیش‌فرض مرورگر) یا .flex-row-reverse برای شروع جهت افقی از طرف مقابل استفاده کنید.

مورد فلکس 1

مورد فلکس 2

مورد فلکس 3

مورد فلکس 1

مورد فلکس 2

مورد فلکس 3

<div class="d-flex bg-200 mb-3 flex-row">
  <div class="p-2 bg-300 border border-400">Flex item 1</div>
  <div class="p-2 bg-300 border border-400">Flex item 2</div>
  <div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>
<div class="d-flex bg-200 mb-3 flex-row-reverse">
  <div class="p-2 bg-300 border border-400">Flex item 1</div>
  <div class="p-2 bg-300 border border-400">Flex item 2</div>
  <div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>

ستون جهت

برای .flex-column تنظیم یک جهت عمودی یا .flex-column-reverse برای شروع جهت عمودی از طرف مقابل استفاده کنید

مورد فلکس 1

مورد فلکس 2

مورد فلکس 3

مورد فلکس 1

مورد فلکس 2

مورد فلکس 3

<div class="d-flex bg-200 mb-3 flex-column">
  <div class="p-2 bg-300 border border-400">Flex item 1</div>
  <div class="p-2 bg-300 border border-400">Flex item 2</div>
  <div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>
<div class="d-flex bg-200 mb-3 flex-column-reverse">
  <div class="p-2 bg-300 border border-400">Flex item 1</div>
  <div class="p-2 bg-300 border border-400">Flex item 2</div>
  <div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>

مطالب را توجیه کنید

ابزارهای justify-content justify-content در ظروف flexbox برای تغییر تراز اقلام فلکس در محور اصلی (محور x برای شروع، محور y اگر flex-direction: column ). از شروع (پیش فرض مرورگر)،،،، end یا را center انتخاب کنیدbetween around.

مورد فلکس

<div class="d-flex justify-content-start bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-end bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-center bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-between bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-around bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>

موارد را تراز کنید

از align-items ابزارهای کاربردی در ظروف فلکس باکس برای تغییر تراز اقلام فلکس در محور متقاطع (محور y برای شروع، محور x اگر flex-direction: column ) استفاده کنید. را انتخاب کنید start ،،،،، یاend center baseline stretch (browser default).

مورد فلکس

<div class="d-flex align-items-start bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-end bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-center bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-baseline bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-stretch bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>

خود را تراز کنید

از align-self ابزارهای کاربردی در موارد flexbox استفاده کنید تا به صورت جداگانه تراز آنها را در محور متقاطع تغییر دهید (محور y برای شروع، محور x اگر flex-direction: column ). از میان گزینه های مشابه،،، align-items: start, end یا انتخاب کنیدcenter baseline stretch (browser default).

مورد فلکس

تراز خود شروع

مورد فلکس

تراز خود پایان

مورد فلکس

خود مرکز را تراز کنید

مورد فلکس

خط پایه خود را تراز کنید

مورد فلکس

کشش خود را تراز کنید

مورد فلکس

<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 p-2 bg-300 align-self-start">Align self start</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 p-2 bg-300 align-self-end">Align self end</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 p-2 bg-300 align-self-center">Align self center</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 p-2 bg-300 align-self-baseline">Align self baseline</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 p-2 bg-300 align-self-stretch">Align self stretch</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>

پر کنید

از .flex-fill کلاس روی یک سری از عناصر خواهر و برادر استفاده کنید تا آنها را به عرضی برابر با محتوایشان (یا عرض مساوی در صورتی که محتوای آنها از جعبه مرزی آنها فراتر نرود) وادار کنید در حالی که تمام فضای افقی موجود را اشغال می کنند.

مورد فلکس با محتوای زیاد

مورد فلکس

<div class="d-flex bg-200">
  <div class="p-2 flex-fill bg-300 border border-400">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bg-300 border border-400">Flex item</div>
  <div class="p-2 flex-fill bg-300 border border-400">Flex item</div>
</div>

فلکس گرو

از .flex-grow-* ابزارهای کمکی برای تغییر قابلیت رشد یک مورد انعطاف پذیر برای پر کردن فضای موجود استفاده کنید. در مثال زیر، .flex-grow-1 المان‌ها از تمام فضای موجود استفاده می‌کنند، در حالی که به دو مورد باقی‌مانده اجازه می‌دهند که فضای لازم را انعطاف‌پذیر کنند.

مورد فلکس

سومین مورد انعطاف پذیر

<div class="d-flex bg-200">
  <div class="p-2 flex-grow-1 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Third flex item</div>
</div>

فلکس شرینک

از .flex-shrink-*ابزارهای کمکی برای تغییر دادن قابلیت کوچک شدن یک مورد انعطاف پذیر در صورت لزوم استفاده کنید. در مثال زیر، دومین مورد انعطاف‌پذیر با .flex-shrink-1مجبور است محتویات خود را در یک خط جدید بپیچد، «کوچک شود» تا فضای بیشتری برای آیتم انعطاف‌پذیر قبلی با .w-100.

مورد فلکس

<div class="d-flex bg-200">
  <div class="p-2 w-100 bg-300 border border-400">Flex item</div>
  <div class="p-2 flex-shrink-1 bg-300 border border-400">Flex item</div>
</div>

حاشیه های خودکار

وقتی ترازهای انعطاف پذیر را با حاشیه های خودکار ترکیب می کنید، Flexbox می تواند کارهای بسیار عالی انجام دهد. در زیر سه نمونه از کنترل موارد انعطاف‌پذیر از طریق حاشیه‌های خودکار نشان داده شده است: پیش‌فرض (بدون حاشیه خودکار)، فشار دادن دو مورد به سمت راست ( .me-auto ) و فشار دادن دو مورد به سمت چپ ( .ms-auto ).

مورد فلکس

<div class="d-flex bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex bg-200 mb-2">
  <div class="me-auto p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="ms-auto p-2 bg-300 border border-400">Flex item</div>
</div>

موارد را تراز کنید

align-items با مخلوط کردن ، flex-direction: column و، یک مورد فلکس را به صورت عمودی به بالا یا پایین ظرف منتقل کنید margin-top: auto or margin-bottom: auto.

مورد فلکس

<div class="d-flex flex-column bg-200 mb-3 align-items-start" style="height: 200px;">
  <div class="mb-auto p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-column bg-200 mb-3 align-items-end" style="height: 200px;">
  <div class="mb-auto p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>

بسته بندی کردن

نحوه بسته شدن اقلام فلکس را در یک ظرف فلکس تغییر دهید. از بین بدون بسته بندی (پیش فرض مرورگر) با .flex-nowrap ، بسته بندی با .flex-wrap ، یا بسته بندی معکوس با را .flex-wrap-reverse انتخاب کنید.

مورد فلکس

<div class="d-flex flex-nowrap mb-3 bg-200 border border-300 py-3" style="width: 8rem">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex mb-3 bg-200 border border-300 flex-wrap">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex mb-3 bg-200 border border-300 flex-wrap-reverse">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>

سفارش

ترتیب بصری اقلام فلکس خاص را با چند ابزار order کاربردی تغییر دهید. ما فقط گزینه هایی را برای اولین یا آخرین مورد و همچنین بازنشانی برای استفاده از سفارش DOM ارائه می دهیم. همانطور که order هر مقدار صحیح را می گیرد (به عنوان مثال، 5 )، CSS سفارشی را برای هر مقدار اضافی مورد نیاز اضافه کنید.

اولین مورد فلکس

آیتم فلکس دوم

سومین مورد انعطاف پذیر

<div class="d-flex flex-nowrap bg-200">
  <div class="order-3 p-2 bg-300 border border-400">First flex item</div>
  <div class="order-2 p-2 bg-300 border border-400">Second flex item</div>
  <div class="order-1 p-2 bg-300 border border-400">Third flex item</div>
</div>

محتوای عالی

از align-content ابزارهای کاربردی در ظروف فلکس باکس برای تراز کردن موارد فلکس در محور متقاطع استفاده کنید. از start (browser default) , end , center , between , around , یا انتخاب کنید stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap و تعداد موارد انعطاف پذیر را افزایش دهید.

مورد فلکس

<div class="d-flex flex-wrap bg-200 mb-3 align-content-start" style="height: 300px;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-center" style="height: 300px;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-end" style="height: 300px;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-between" style="height: 300px;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-around" style="height: 300px;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-stretch" style="height: 300px;">
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
  <div class="p-2 bg-300 border border-400">Flex item</div>
</div>

فلکس

رفتارهای انعطاف پذیر

ردیف جهت

ستون جهت

مطالب را توجیه کنید

موارد را تراز کنید

خود را تراز کنید

پر کنید

فلکس گرو

فلکس شرینک

حاشیه های خودکار

موارد را تراز کنید

بسته بندی کردن

سفارش

محتوای عالی

تنظیمات

طرح رنگ بندی

RTL حالت

چیدمان سیال

موقعیت ناوبری

سبک نوار ناوبری عمودی

چیزی که میبینی را دوست داری؟

آیفون

فالکون نسخه 1.8.2

آنا کارینینا

آنتونی هاپکینز

اما واتسون

فلکس

رفتارهای انعطاف پذیر

ردیف جهت

ستون جهت

مطالب را توجیه کنید

موارد را تراز کنید

خود را تراز کنید

پر کنید

فلکس گرو

فلکس شرینک

حاشیه های خودکار

موارد را تراز کنید

بسته بندی کردن

سفارش

محتوای عالی

تنظیمات

طرح رنگ بندی

RTL حالت

چیدمان سیال

موقعیت ناوبری

سبک نوار ناوبری عمودی

چیزی که میبینی را دوست داری؟