| Каскадне стилске таблице |
|---|
| Поређење |
| Веб дизајн |
CSS флексибилни распоред, познатији каоFlexbox, јеCSS модел веб распореда.[1] Налази се у фази препоруке кандидата (CR)W3C-а. Flexbox омогућава да сереспонзивни елементи унутар контејнера аутоматски распореде у зависности од величине приказног прозора (екрана уређаја).
Већинавеб страница је написана комбинацијомHTML-а,JavaScript-а иCSS-а. Укратко, HTML одређујесадржај и логичку структуру странице, док CSS одређујекако она изгледа: боје, фонтове, форматирање, распоред и стил.
CSS flex-box распоред је посебан начин за одређивање распореда HTML страница.
Једна од најзначајнијих карактеристика flex распореда је његова способност прилагођавања облику, на основу окружења за гледање. Флексибилни оквири се могу прилагођавати по величини - било да се смањују, како би се избегло непотребно монополисање простора, или да се повећавају како би се направио простор за садржај који ће се уклопити у њихове границе. Штавише, flexибилни распоред је мање рестриктиван у погледу тока садржаја него код других CSS модела распореда, који су генерално једносмерни. Смерни ток flex распореда може се одредити десно, лево, нагоре или надоле. Појединачне ставке унутар flex контејнера такође се могу аутоматски преуредити како би одговарале расположивом простору распореда.
Од краја 2000-их па надаље, интензивна употреба веба од странемобилних агената мотивисала је „течне распореде“ иреспонзивне елементе за све већи број величина екрана .[2] Током 2010-их интензивна употреба популарнихJavaScriptоквира за распоред, као што јеBootstrap, инспирисала је CSS спецификације flexибилних кутија и распореда у мрежу.[3]
CSS модули су укључивали слична решења, као што су flexbox и grid.[4] Flexbox је првобитно заснован на сличној функцији доступној уXUL-у, алатки за кориснички интерфејс компаније Mozilla, која се користи уFirefox-у.[5]
Од децембра 2022., 99,68% инсталираних прегледача (99,59% прегледача на десктоп рачунарима и 100% мобилних прегледача) подржава CSS Flexbox распоред оквира.[6]
Следећи термини су повезани са flexbox моделом распореда.
Означавање елемента као flex елемента захтева подешавање CSS својства приказа елемента на flex или inline-flex, као што следи:
display:flex;
Или:
display:inline-flex;
Постављањем display-а на једну од две горе наведене вредности, елемент постаје flex container, а његова деца, flex ставке. Постављањем display-а на flex, контејнер постаје елемент на нивоу блока, док постављањем display-а на inline-flex, контејнер постаје елемент на нивоу inline.[7]
Једна од предности flexbox-а је могућност лаког поравнавања елемената унутар контејнера са центром странице, и вертикално и хоризонтално.
.container{display:flex;align-items:center;justify-content:center;}
