ظرف فلکس (Flex Container)
«ظرف فلکس (Flex Container)» همان والد فلکسی است. با آن چیدمان واکنش گرا داریم. سپس آیتم ها منظم و کشسان می شوند. بنابراین کنترل فاصله ها راحت تر می شود.
ویژگی های ظرف فلکس
مهم ترین ویژگی ها: display، flex-direction، flex-wrap، flex-flow، justify-content، align-items، align-content. هر کدام جهت، پیچش و تراز را تعیین می کنند.
flex-direction (جهتِ ردیف/ستون)
«جهت (Direction)» یعنی چینش آیتم ها در ردیف یا ستون. مقدار row افقی است.
.flex-container {\n display: flex;\n flex-direction: row;\n}\n
مقدار column آیتم ها را عمودی می چیند.
.flex-container {\n display: flex;\n flex-direction: column;\n}\n
flex-wrap (پیچش آیتم ها)
«پیچش (Wrap)» یعنی رفتن به خط بعد وقتی جا کم است. مقدار wrap فعالش می کند.
.flex-container {\n display: flex;\n flex-wrap: wrap;\n}\n
flex-flow (میان بُرِ جهت+پیچش)
«میان بُر (Shorthand)» دو ویژگی را باهم می نویسد. اینجا ردیفِ پیچ دار داریم.
.flex-container {\n display: flex;\n flex-flow: row wrap;\n}\n
justify-content (تراز در محورِ اصلی)
«محور اصلی (Main Axis)» همان جهتِ flex-direction است. مقدار center آیتم ها را وسط می برد.
.flex-container {\n display: flex;\n justify-content: center;\n}\n
align-items (تراز در محور عمود)
«محور عمود (Cross Axis)» عمود بر جهت اصلی است. مقدار center در این محور وسط چین می کند.
.flex-container {\n display: flex;\n height: 200px;\n align-items: center;\n}\n
align-content (تراز خطوط فلکس)
وقتی پیچش فعال است، چند «خط فلکس» داریم. align-content جای خطوط را مشخص می کند.
.flex-container {\n display: flex;\n height: 400px;\n flex-wrap: wrap;\n align-content: center;\n}\n
سناریوی محبوب: وسط چین کامل
برای «وسط چین کامل»، هر دو محور را مرکز کن. پس محتوای کارت دقیقاً وسط می ایستد.
.flex-container {\n display: flex;\n height: 400px;\n justify-content: center;\n align-items: center;\n}\n
گام های عملی
- روی والد بنویس:
display: flex;. - جهت را با
flex-directionمشخص کن. - تراز را با
justify-contentوalign-itemsتنظیم کن.
جمع بندی سریع
- ظرف فلکس والد همه چیز است.
- جهت =
flex-direction؛ پیچش =flex-wrap. - تراز افقی با
justify-contentانجام می شود. - تراز عمودی با
align-itemsانجام می شود.
برای پایه ها به فلکس باکس (Flexbox Intro) برو. سپس ادامه بده با آیتم های فلکس.