آیتم های فلکس (Flex Items)
«آیتم فلکس (Flex Item)» هر فرزند مستقیمِ ظرف فلکس است. این آیتم ها با ویژگی های مخصوص، بزرگ می شوند، کوچک می شوند، و حتی جایشان عوض می شود. بنابراین چیدمان واکنش گرا راحت تر می شود.
order (ترتیب نمایش)
«ترتیب (Order)» یعنی کدام آیتم زودتر دیده شود. مقدار پیش فرض صفر است.
<style>\n .flex-container {\n display: flex;\n gap: 8px;\n }\n .flex-container div {\n padding: 8px;\n background: #eee;\n }\n .flex-container div:nth-child(1) {\n order: 3;\n }\n .flex-container div:nth-child(2) {\n order: 2;\n }\n .flex-container div:nth-child(3) {\n order: 4;\n }\n .flex-container div:nth-child(4) {\n order: 1;\n }\n</style>\n<div class="flex-container">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n</div>\nflex-grow (میزان بزرگ شدن)
«بزرگ شدن نسبی (Grow)» یعنی سهمِ هر آیتم از فضای اضافه. صفر یعنی رشد نکند.
<style>\n .g-container {\n display: flex;\n gap: 8px;\n }\n .g-container div {\n flex-grow: 1;\n padding: 8px;\n background: #dde;\n }\n .g-container div:nth-child(3) {\n flex-grow: 4;\n }\n</style>\n<div class="g-container">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n</div>\nflex-shrink (میزان کوچک شدن)
«کوچک شدن نسبی (Shrink)» یعنی وقتی جا کم است کدام بیشتر جمع شود.
<style>\n .s-container {\n display: flex;\n gap: 8px;\n width: 360px;\n border: 1px solid #ccc;\n }\n .s-container div {\n flex: 0 1 120px;\n padding: 8px;\n background: #ede;\n }\n .s-container div:nth-child(3) {\n flex-shrink: 2;\n }\n</style>\n<div class="s-container">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n <div>5</div>\n <div>6</div>\n</div>\nflex-basis (طول اولیه)
«طول اولیه (Basis)» اندازه ی شروعِ آیتم است. سپس با رشد یا جمع تغییر می کند.
<style>\n .b-container {\n display: flex;\n gap: 8px;\n }\n .b-container div {\n flex: 0 1 auto;\n padding: 8px;\n background: #def;\n }\n .b-container div:nth-child(3) {\n flex-basis: 250px;\n }\n</style>\n<div class="b-container">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n</div>\nflex (میان بُر grow/shrink/basis)
«میان بُر (Shorthand)» سه عدد دارد: رشد، جمع شدن، طول اولیه. به این شکل بنویس.
<style>\n .f-container {\n display: flex;\n gap: 8px;\n }\n .f-container div {\n padding: 8px;\n background: #efd;\n }\n .f-container div:nth-child(3) {\n flex: 1 0 150px;\n }\n</style>\n<div class="f-container">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n</div>\nalign-self (تراز خاصِ هر آیتم)
«تراز شخصی (Align Self)» یعنی این آیتم مستقل از بقیه تراز شود. روی محور عمود است.
<style>\n .a-container {\n display: flex;\n gap: 8px;\n height: 200px;\n border: 1px dashed #bbb;\n align-items: stretch;\n }\n .a-container div {\n padding: 8px;\n background: #f3f3f3;\n }\n .a-container div:nth-child(3) {\n align-self: center;\n }\n</style>\n<div class="a-container">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n</div>\nگام های عملی
- برای والد بنویس:
display: flex;. - فضای اضافه را با
flex-growپخش کن. - کمبود فضا را با
flex-shrinkمدیریت کن. - طول شروع را با
flex-basisبده. - در صورت نیاز از
flexمیان بُر استفاده کن.
جمع بندی سریع
orderتنها جای نمایش را عوض می کند.flex-growفضای اضافه را تقسیم می کند.flex-shrinkدر تنگنا جمع می کند.flex-basisطول اولیه را تعیین می کند.align-selfتراز همین یک آیتم را عوض می کند.
ادامه ی بحث را در ظرف فلکس ببین. همچنین به فلکس باکس سر بزن.