Flexbox یکی از قدرتمندترین ابزارهای چیدمان در CSS است. در این راهنما ، من 20 قطعه مفید CSS را برای استفاده موثر Flexbox پوشش می دهم. این شامل سناریوهای مشترک و ترفندهای زیادی است.
بیایید شروع کنیم!
📌 آناتومی یک قانون Flexbox
قبل از شیرجه رفتن ، بیایید یک قانون Flexbox را خراب کنیم:
.container {
display: flex; /* Defines a flex container */
justify-content: center; /* Aligns items horizontally */
align-items: center; /* Aligns items vertically */
}
-
انتخاب کننده (
.container): عنصر را هدف قرار می دهد. -
خاصیت (
display: flex): آن را به یک ظرف فلکس تبدیل می کند. -
مقادیر (
center, space-between، و غیره): طرح را تنظیم کنید.
💡 نکته برتر: وقتی شک دارید ، اضافه کنید outline: 1px solid red; برای دیدن آنچه اتفاق می افتد!
1. مرکز هر چیزی (به معنای واقعی کلمه)
نه بیشتر margin: auto ترفندها – این هر چیزی را در داخل یک ظرف فلکس قرار می دهد.
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full viewport height */
}
2. موارد را به طور مساوی فضای بیرون کنید
می خواهید فاصله مساوی بین موارد؟ استفاده کردن justify-content: space-betweenبشر
.container {
display: flex;
justify-content: space-between;
}
3. موارد را به خط بعدی بپیچید
اجازه می دهد تا مواردی که از عرض کانتینر فراتر می روند ، بسته شوند.
.container {
display: flex;
flex-wrap: wrap;
}
این برای ایجاد ستون های پاسخگو بدون نیاز به پرس و جوهای اضافی رسانه ای بسیار عالی است.
4. یک پاورقی چسبناک درست کنید
اطمینان حاصل کنید که پاورقی خود را در هنگام وجود محتوای کمی به پایین می چسباند.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer {
margin-top: auto;
}
5. در هر ردیف 3 مورد اضافه کنید
یک سناریوی مشترک شامل اضافه کردن تعداد مشخصی از موارد در هر ردیف ، مانند 3 تصویر در هر ردیف برای یک گالری است.
برای انجام این کار ، فقط یک ظرف والدین ایجاد کنید و سپس عرض عناصر را در یک درصد قرار دهید. برای 3 مورد ، 33 ٪ خواهد بود ، برای 4 مورد 25 ٪ و غیره.
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 70vw;
justify-content: center;
}
.container img {
width: calc(33.333% - 10px); /* Three images per row */
height: auto;
}
6. پشتیبانی از ویژگی شکاف در Flexbox
مرورگرهای مدرن در حال حاضر از ویژگی GAP در چیدمان Flexbox پشتیبانی می کنند و نیاز به حاشیه بین موارد را از بین می برند.
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
7. Flex-Grow
شما می توانید از مقادیر کسری با استفاده کنید flex-grow برای ایجاد توزیع های ظریف تر از فضا.
.container {
display: flex;
}
.item-primary {
flex-grow: 2; /* Gets twice as much extra space */
}
.item-secondary {
flex-grow: 1; /* Gets normal amount of extra space */
}
.item-minimal {
flex-grow: 0.5; /* Gets half as much extra space */
}
8. موارد را به پایین تراز کنید
عالی برای حباب گپ یا عناصر چسبنده.
.bottom-align {
display: flex;
align-items: flex-end;
}
9. ترتیب ستون معکوس
بدون لمس HTML ، ترتیب موارد را بچرخانید.
.reverse {
display: flex;
flex-direction: column-reverse;
}
10. موارد فلکس با عرض برابر
همه عناصر کودک را در فضای مساوی قرار دهید.
.equal {
display: flex;
}
.equal > * {
flex: 1;
}
11. موارد را تراز کنید
با تنظیمات می توانید محتویات موجود در کانتینر را در مرکز محور قرار دهید align-items به centerبشر
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
12. یک مورد را رشد دهید ، دیگران ثابت می مانند
ایده آل برای چیدمان با نوارهای جانبی یا محتوای اصلی.
.grow {
display: flex;
}
.grow > .main {
flex: 1;
}
13. مورد را به پایان ردیف تراز کنید
همچنین می توانید با تنظیم یک مورد ، یک مورد را به انتهای یک ردیف تراز کنید margin-left دارایی به autoبشر
.container {
display: flex;
flex-direction: row;
}
.item-third {
margin-left: auto;
}
14. از کوچک شدن موارد جلوگیری کنید
هنگام تغییر اندازه ظرف ، از کوچک شدن موارد جلوگیری می کند. برای اطمینان از بسته بندی موارد به خط بعدی ، ویژگی Flex Wrap را نیز اضافه کنید.
.item {
flex-shrink: 0;
flex-wrap: wrap;
}
15. هنگام بسته بندی محتوا را تراز کنید
هنگامی که به یک خط جدید می پردازند ، تراز وسایل فلکس را کنترل می کند.
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
16.
اگر می خواهید ترتیب موارد را معکوس کنید و همچنین اطمینان حاصل کنید که موارد نیز بسته بندی می شوند ، فقط تنظیم کنید flex-wrap به wrap-reverseبشر
.container {
display: flex;
flex-wrap: wrap-reverse;
}
17. یک مورد خاص را به صورت متفاوت تراز کنید
تراز را برای یک مورد خاص فلکس غلبه می کند.
.item {
align-self: flex-end;
}
18. کنترل رشد کالای فلکس دقیقاً
استفاده از حاشیه های خودکار در مورد Flex ، فضای بین گروه های موارد بدون عناصر بسته بندی اضافی ایجاد می کند. این مناسب برای ایجاد میله های ناوبری با بخش های جداگانه است.
.navbar {
display: flex;
flex-direction: row;
}
.logo {
margin-right: auto; /* Pushes everything else to the right */
}
.nav-links {
/* These will be pushed to the right side */
}
19. سفارش موارد در طرح های پاسخگو
در order ویژگی می تواند موارد فلکس را بدون تغییر ساختار HTML شما تنظیم کند. این به ویژه برای طرح های پاسخگو مفید است.
.container {
display: flex;
}
.sidebar {
order: 2; /* Will appear second visually */
}
.main-content {
order: 1; /* Will appear first visually */
}
20. به انتهای ستون تراز کنید
با تنظیم می توانید یک مورد را به انتهای یک ستون تراز کنید margin-top به autoبشر به عنوان مثال ، این برای طرح های نوار کناری مفید است.
.container {
display: flex;
flex-direction: column;
}
.item-third {
margin-top: auto;
}
برای نکات بیشتر مرا دنبال کنید
اگر می خواهید منابع بیشتری مانند این را بدست آورید ، حتماً مرا در X/Twitter دنبال کنید که در آن منابع بیشتری مانند این را ارائه می دهم. 🙂
نکات دیگری برای به اشتراک گذاشتن دارید؟
با تشکر از خواندن! امیدوارم که این منبع را مفید داشته باشید. افکار شما چیست؟ آیا نکات Flexbox دیگری دارید که می خواهید به اشتراک بگذارید؟ حتماً در بخش نظرات زیر به من اطلاع دهید.
این قطعه ها برای سناریوهای مشترک که به عنوان یک توسعه دهنده با آنها روبرو خواهید شد بسیار مفید هستند. Flexbox یک ابزار طرح ریزی فوق العاده قدرتمند CSS برای ابزار ابزار شماست. این قطعه ها را کپی کنید ، آنها را در صورت لزوم ترفند کنید و از این موارد برای شروع طرح های عالی استفاده کنید.
با تشکر از خواندن!
