جعبه انعطاف پذیر (Flexbox)، در CSS

جعبه انعطاف پذیر (Flexbox)، یک مدل چیدمان (Layout) در CSS است که توسط آن می توانیم عنصرها را در یک جهت (افقی یا عمودی) مرتب کنیم و همچنین فضای بین عنصرها را مدیریت کنیم.

هنگام استفاده از جعبه انعطاف پذیر (Flexbox)، یک عنصر والد (Parent) داریم که تعدادی عنصر درون آن قرار می گیرند. عنصر والد (Parent) را flex container (ظرفیت فلکس) و عنصرهای درون آن را flex items (آیتم های فلکس) می نامیم.

مشخصه display: flex :

برای عنصر والد (Parent)، مشخصه display: flex ذکر می شود.

مشخصه flex-direction :

مشخصه flex-direction جهت اصلی (Main Axis) چیدمان آیتم ها را تعیین می کند. یعنی تعیین می کند که آیتم ها به صورت افقی (Row) یا عمودی (Column) و در چه ترتیبی چیده شوند.

برای flex-direction حالت های زیر را داریم :

1- پیش فرض : چیدمان آیتم ها به صورت افقی و از چپ به راست (در حالت LTR) یا راست به چپ (در حالت RTL) :

2- چیدمان آیتم ها به صورت افقی اما در جهت معکوس :

3- چیدمان آیتم ها به صورت عمودی و از بالا به پایین :

4- چیدمان آیتم ها به صورت عمودی اما از پایین به بالا :

ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت افقی و از چپ به راست (در حالت LTR) یا راست به چپ (در حالت RTL)، با مشخصه های display: flex و flex-direction: row :

ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت افقی اما در جهت معکوس، با مشخصه های display: flex و flex-direction: row-reverse :

ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت عمودی و از بالا به پایین، با مشخصه های display: flex و flex-direction: column :

ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت عمودی اما از پایین به بالا، با مشخصه های display: flex و flex-direction: column-reverse :