Introducere în Web Development

De foarte mulți ani, site-urile au un design predictibil: Numele sau logo-ul în partea din stânga-sus, meniu pe aceeași linie, poate și o căsuță de căutare.

Cum implementăm un design care are mai multe elemente pe aceeași linie orizontală?

Am putea încerca ceva cu proprietatea position, dar ar trebui să ne chinuim puțin până iese exact ce vrem.

O soluție pe care au folosit-o web-developerii și web-designerii în anii 2000 a fost să folosească tabele. Cu ajutorul atributelor HTML rowspan și colspan, se poate realiza ceva de genul:

Însă se pare că browserele au nevoie de foarte multe resurse pentru a desena tabele, iar în era procesoarelor cu un singur nucleu de la acea vreme, nu erau prea multe.

Următoarea soluție a fost folosirea proprietății CSS float. Aceasta împinge elementul în direcția indicată, iar elementele următoare vor apărea chiar lângă.
Dar modul în care a fost implementat în specificațiile CSS însemna că elementul împins putea să depășească limitele părintelui. Și problema asta s-a rezolvat cu o cârpeală.

Folosind float, au apărut biblioteci CSS care să te ajute. Unele care implementau conceptul de "grid": Interfața era împărțită în 12 (sau alt număr fix) de coloane, iar fiecare element de tip bloc se putea întinde pe una sau mai multe, folosind clase definite în bibliotecă.
Acest concept a fost făcut foarte popular de către biblioteca Bootstrap de la Twitter, folosită foarte des în anii 2010.

Versiunea de CSS 3 a fost gândită pentru a îndeplini nevoile web-ului modern, inclusiv nevoia de a distribui elemente pe orizontală.

Una din soluții a fost folosirea de „cutii flexibile” (Flexible Box), Flexbox.
Eu îi spun „flex” pentru că se ajunge la expresii interesante în limba Română, precum „Punem flexul pe elementul ăla”.