From the course: CSS Layouts: From Float to Flexbox and Grid

Getting started with Flexbox - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial Buy for my team

Getting started with Flexbox

“

- [Pripovedač] Fleksibilni raspored kutija ili skraćeno Flekbok, pruža mnogo načina za usklađivanje sadržaja, naručivanje stavki i implementaciju fleksibilne veličine. Dugo vremena, plovci su korišćeni za kreiranje rasporeda stranica. To nam je omogućilo da kreiramo složenije rasporede od tabela, ali bilo je i drugih ograničenja kao što je stvaranje jednakih visina kolona, koje smo videli u prethodnoj vežbi float. Flekbok je olakšao rešavanje ovih vrsta problema sa rasporedom. Flekbok je potpuno novi modul rasporeda, tako da to znači novu terminologiju i mnoštvo svojstava zasnovanih na flek-u. Takođe se često naziva jednodimenzionalnim rasporedom, jer su stavke postavljene na jednoj osi ili kao kolone ili redovi. Mi ćemo dobiti više u to znači malo kasnije. Flek kontejner je roditeljski element i samo potomci elementi flek kontejnera su flek stavke, a ne potomci elementi. Možete, međutim, gnezdo flek kontejnera u drugom flek kontejneru. Da biste koristili Flekbok, prvo mora biti definisan kontejner za flek. Ranije smo koristili osobinu prikaza da promenimo ponašanje elemenata na nivou inline i bloka, ali prikaz se takođe koristi za podešavanje kontejnera flek sa jednom od dve vrednosti, flek ili inline-flek. Evo primera dva kontejnera koji sadrže pet blok elemenata u normalnom toku. Elementi su složeni i obuhvataju širinu kontejnera. Kada se displej flek doda u roditeljski element, on je sada definisan kao flek kontejner i svaki potomak element je sada flek stavka. Flek stavke se prikazuju u nizu i postaju iste veličine kao i njihov sadržaj, ali flek kontejneri i dalje obuhvata širinu svog kontejnera. Ako podesite vrednost prikaza na inline-flek - flek kontejner će obuhvatiti širinu svog sadržaja, flek stavke i prikazuje u liniji na druge flek kontejnere. Dakle, to ne menja način na koji se prikazuju flek stavke, umesto toga čini flek kontejner prikaz u liniji. Iako se fleksibilne stavke automatski menjaju veličinu prema veličini njihovog sadržaja, možete podesiti i određene veličine, o čemu ćemo uskoro govoriti. Kada koristite nasleđene tehnike kao što je float, svaka stavka je iste visine kao i njen sadržaj, što smo upravo videli u našoj prethodnoj vežbi. Just by adding the flex display value, Samo dodavanjem vrednosti flek prikaza, flek stavke se the flex items are automatically arranged automatski raspoređuju u fleksibilne stavke jednake visine, into flexible equal height items, međutim, ima više flek svojstva da dodatno prilagodite however, there are more flex properties svoje rasporede. to further customize your layouts.

Contents