فلکس باکس (Flexbox Intro)
«فلکس باکس (Flexbox)» یک مدل چیدمان واکنش گراست. با آن آیتم ها در ردیف یا ستون، مرتب و کشسان می شوند. بنابراین دیگر به float یا position نیازی نیست.
شروع سریع فلکس باکس
یک فلکس کانتینر تعریف کن؛ سپس سه فلکس آیتم درونش بگذار.
<html>\n<head>\n<style>\n.container {\n display: flex;\n background-color: DodgerBlue;\n}\n\n.container div {\n background-color: #f1f1f1;\n margin: 10px;\n padding: 20px;\n font-size: 30px;\n}\n</style>\n</head>\n<body>\n\n<div class="container">\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n</div>\n\n</body>\n</html>\nفلکس باکس دقیقاً چیست؟
«فلکس باکس (Flexible Box)» چیدمان یک بعدی می دهد؛ یعنی یا ردیفی یا ستونی. بنابراین اندازه ها و فاصله ها انعطاف پذیر می شوند.
اجزای فلکس باکس
فلکس کانتینر (Flex Container): والد که display را روی flex یا inline-flex می گذاریم.
فلکس آیتم (Flex Item): فرزندان مستقیم کانتینر که خودکار آیتم می شوند.
فلکس باکس یا گرید؟
فلکس برای یک بعد (ردیف یا ستون) عالی است. اما CSS Grid برای دو بعد (ردیف و ستون) بهتر است.
گام های عملی
- روی والد بنویس:
display: flex;. - آیتم ها را فرزند مستقیم والد کن.
- سپس جهت و فاصله ها را تنظیم کن.
نکته: برای دیدن رفتار، آیتم ها را متفاوت استایل بده.
نمونه آماده سریع
یک نمونه آماده دیگر از فلکس باکس را اینجا باز کن.
<!-- نسخه ی آماده دمو از منبع -->\n<!-- کانتینر و چند آیتم فلکسی -->\n<div class="flex-demo">\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n <div>Item 4</div>\n <div>Item 5</div>\n</div>\nجمع بندی سریع
- فلکس باکس یک بعدی و انعطاف پذیر است.
- والد = کانتینر؛ فرزند = آیتم.
- دیگر به float نیازی نیست.
- برای دو بعدی، Grid مناسب تر است.
ادامه بده: بخش نمونه های MQ برای ترکیب با فلکس، و صفحه ی پرس وجوهای رسانه ای برای واکنش گرایی.