CSS flexbox گزینه های زیادی را برای طراحی های وب شما به ارمغان می آورد. یاد بگیرید که چگونه از آن برای ایجاد طرح‌بندی‌های مقیاس‌پذیر و انعطاف‌پذیر استفاده کنید.
طراحی های مدرن وب سایت باید به تغییرات در محتوا یا اندازه مرورگر پاسخگو باشند. می توانید با استفاده از وانیلی CSS، پرسش های رسانه ای یا flexbox به این هدف برسید.
برخی از ویژگی‌های انعطاف‌پذیر مانند پیچ‌شدن انعطاف‌پذیر یا flex-grow می‌توانند اندازه یا مکان یک عنصر را به روشی بصری جذاب تغییر دهند. در این مقاله نمونه‌هایی از نحوه استفاده از ویژگی‌های flex-grow، flex-shrink، flex-wrap، flex-flow و order flex توضیح داده می‌شود.
نحوه تنظیم CSS Flex Display
اگر با اصول flexbox آشنا نیستید، می‌توانید این قطعه CodePen را بررسی کنید. این شامل کد نمونه برای یک راه اندازی ساده flexbox است. ابتدا باید اقلام کودک را زیر یک div والدین یا “ظرف فلکس” بپیچید.
<div class="parent">
<div class="child-item"></div>
<div class="child-item"></div>
<div class="child-item"></div>
</div>
ویژگی display: flex را به div والد اضافه کنید.
.parent {
display: flex;
}
چگونه اقلام را در یک ظرف رشد دهیم
ویژگی flex-grow به آیتم های فرزند اجازه می دهد تا فضای موجود در قسمت اصلی خود را پر کنند. این ویژگی به شما اجازه می دهد تا مقدار فضایی را که هر آیتم جعبه می تواند اشغال کند، «نسبت» مشخص کنید.
برای افزودن flex-grow، ویژگی flex-grow CSS را به هر یک از آیتم های فرزند اضافه کنید.
<div class="parent">
<div style="background-color: red; flex-grow: 1"></div>
<div style="background-color: orange; flex-grow: 1"></div>
<div style="background-color: yellow; flex-grow: 1"></div>
<div style="background-color: green; flex-grow: 3"></div>
<div style="background-color: blue; flex-grow: 1"></div>
</div>
.parent {
width: 500px;
display: flex;
}
رشد انعطاف پذیر 0 برای هر مورد به این معنی است که جعبه ها برای پر کردن فضای والد خود گسترش نمی یابند. 0 مقدار پیش فرض این ویژگی است.
رشد انعطاف‌پذیر 1 برای هر آیتم، همه جعبه‌ها را مجبور می‌کند تا به یک اندازه بزرگ شوند تا فضای موجود در داخل والد را متناسب کنند.
اگر یکی از اقلام دارای رشد فلکس بزرگتری بود، به عنوان مثال:
<div style="background-color: green; flex-grow: 3"></div>
کادر سبز سعی خواهد کرد تا سه برابر فضای بیشتری نسبت به سایر کادرها به دست آورد.
کد ویژگی flex-grow را در این قسمت مشاهده کنید
قطعه CodePen
برای دیدن یک نمونه کار
چگونه اقلام را در یک ظرف کوچک کنیم
در برخی موارد، عرض والد ممکن است کوچک شود و اقلام داخل والد دیگر داخل آن قرار نگیرند. می توانید از ویژگی flex-shrink برای کوچک کردن اندازه جعبه ها استفاده کنید. به این ترتیب، آنها می توانند در داخل والد باقی بمانند.
Flex-shrink به شما این امکان را می دهد که نسبتی را برای میزان کوچک شدن هر آیتم مشخص کنید.
ویژگی flex-shrink را به آیتم های فرزند div اضافه کنید. عرض والدین و فرزندان را طوری تغییر دهید که وسایل داخل ظرف قرار نگیرند.
<div class="parent">
<div style="background-color: red; flex-shrink: 1"></div>
<div style="background-color: orange; flex-shrink: 1"></div>
<div style="background-color: yellow; flex-shrink: 1"></div>
<div style="background-color: green; flex-shrink: 2"></div>
<div style="background-color: blue; flex-shrink: 1"></div>
</div>
.parent {
width: 500px;
display: flex;
}
.parent div {
width: 150px;
height: 150px;
}
فلکس شرینک 1 برای همه موارد به این معنی است که اگر عرض والد کاهش یابد، همه موارد به یک اندازه کوچک می شوند.
اگر یکی از اقلام دارای فلکس شرینک بزرگتر بود، برای مثال:
<div style="background-color: green; flex-shrink: 2"></div>
جعبه سبز سعی می کند دو برابر جعبه های دیگر کوچک شود.
کد خاصیت flex-shrink را در این قسمت مشاهده کنید
قطعه CodePen
برای دیدن یک نمونه کار
چگونه موارد را به ردیف بعدی فشار دهیم
ویژگی flex-wrap به شما این امکان را می‌دهد که اگر آیتم‌ها در عرض ظرف اصلی قرار نگیرند، آنها را به خط بعدی فشار دهید. در اینجا اقلام کوچک نمی شوند و شما می توانید ارتفاع و عرض اقلام را حفظ کنید.
گزینه های خاصیت flex-wrap عبارتند از:
flex-wrap: nowrap | wrap | wrap-reverse
ویژگی flex-wrap را به flex-container والد اضافه کنید. اطمینان حاصل کنید که عرض ظرف به اندازه کافی کوچک است، بنابراین برای وسایل کودک داخل آن مناسب نیست. با این کار، موارد سرریز شده در ردیف جدید قرار می گیرند.
<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
.parent {
width: 300px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.parent div {
width: 100px;
height: 100px;
}
مقدار wrap اقلام را در سمت راست بالای ظرف قرار می‌دهد. مقدار wrap-reverse موقعیت اقلام را تغییر می‌دهد تا از پایین سمت راست ظرف شروع شود. هنگام بسته بندی اقلام، موارد را به جای زیر، روی یک ردیف جدید در بالا فشار می دهد.
اگر ارتفاعی را در کانتینر والد تعیین کنید، ظرف بین ردیف‌های آیتم‌ها فاصله ایجاد می‌کند.
اگر می خواهید این فاصله را حذف کنید، اما ارتفاع div والد را حفظ کنید، از ویژگی align-content استفاده کنید. خاصیت align-content را به عنوان “flex-start” در div والد مشخص کنید:
.parent {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
ویژگی align-content یکی از چندین ویژگی اصلی flexbox است که به شما امکان کنترل تراز را می دهد.
کد خاصیت flex-wrap را در این قسمت مشاهده کنید
قطعه CodePen
برای دیدن چند نمونه
چگونه موارد را به ستون بعدی فشار دهیم
اگر از طرح‌بندی متفاوتی (مانند ستون) استفاده می‌کنید و همچنان به عناصر برای بسته‌بندی نیاز دارید، می‌توانید از ویژگی flex-flow استفاده کنید. این ویژگی flex ترکیبی از ویژگی های flex-wrap و flex-direction است.
ترکیب‌های گزینه‌ای که می‌توانید برای ویژگی flex-flow استفاده کنید شامل موارد زیر است:
flex-wrap: row nowrap | column nowrap | row wrap | column wrap | row wrap-reverse | column wrap-reverse
این ویژگی مشابه ویژگی flex-wrap بالا عمل می کند. فلکس فلو را به ظرف فلکس والد اضافه کنید. اطمینان حاصل کنید که عرض ظرف اصلی به اندازه کافی کوچک است تا وسایل کودک را مجبور به بسته بندی کند:
.parent {
width: 300px;
border: 1px solid black;
display: flex;
flex-flow: column wrap;
}
.parent div {
width: 100px;
height: 100px;
}
موارد در جهت مشخص شده (ردیف یا ستون) بسته می شوند.
کد خاصیت flex-flow را در این قسمت مشاهده کنید
قطعه CodePen
برای دیدن چند نمونه
نحوه تغییر ترتیب اقلام
اگر به دلیل هر نوع داده پویا نیاز به مرتب کردن مجدد موارد در صفحه داشتید، می توانید از ویژگی order flex استفاده کنید. این ویژگی به شما امکان می دهد ترتیب ظاهر شدن هر آیتم را مشخص کنید.
اعداد لزوماً نباید از 1 شروع شوند. شما می توانید از هر اعداد و فواصل استفاده کنید، و ویژگی order عناصر HTML را از پایین ترین به بالاترین ترتیب می دهد.
ویژگی order را به هر یک از آیتم های داخل ظرف flex والد اضافه کنید:
<div class="parent">
<div class="red" style="order: 2"></div>
<div class="orange" style="order: 1"></div>
<div class="yellow" style="order: 5"></div>
<div class="green" style="order: 4"></div>
<div class="blue" style="order: 3"></div>
</div>
در این حالت، کادر نارنجی در سمت راست و پس از آن کادرهای قرمز، آبی، سبز و سپس زرد قرار خواهند گرفت.
کد ملک سفارش را در این قسمت مشاهده کنید
قطعه CodePen
برای دیدن چند نمونه
آزمایش با ویژگی های بیشتر CSS در وب سایت شما
شما می توانید از این ویژگی های انعطاف پذیر برای پاسخ گویی بیشتر وب سایت خود استفاده کنید. این شامل استفاده از ویژگی‌های flex-grow، flex-shrink، flex-wrap، flex-flow و order flex می‌شود.
همچنین می‌توانید با ویژگی‌های انعطاف‌پذیر بیشتری آشنا شوید تا به شما در تراز کردن عناصر HTML در وب‌سایتتان کمک کند.