Flexbox în CSS și HTML (Tutorial) - dezvoltarea unor aranjamente responsive.

Asta te așteaptă în cursul despre Flexbox în CSS și HTML.

Care este conceptul de layout flexbox și de ce ar trebui să-l folosim?

Aici se inițiază proiectul, în care se va lucra ulterior.

Prezint aici structura de exemplu și posibilitățile de depanare integrate în VS Code cu instrumentele MS Edge. De asemenea, în acest videoclip, pentru prima dată, se activează aspectul Flexbox și se stabilește direcția.

Cum se poate împărți spațiul în mod uniform sau în anumite proporții în structura flexbox?

O mică exercițiu în care nu poți evita un pic de matematică simplă.

Aici prezint un aspect de design orizontal cu două bare laterale, care se ajustează responsiv la lățime.

Elementele copil pot fi aliniate de la containerul Flex de-a lungul axei transversale. Aici îți arăt cum poți seta acest lucru.

Nu numai la nivel de container se poate seta alinierea tuturor elementelor copil, ci cu align-self se poate ajusta și pentru elementele individuale diferit.

Un exercițiu mic pentru alinierea individuală cu un cub.

Nu doar de-a lungul axei transversale se poate alinia într-un container flexibil, ci se poate regla și multe lucruri de-a lungul axei principale. ;-)

Un exemplu mic despre cum se poate folosi alinierea de-a lungul axei principale pentru un aspect de aspect foarte des întâlnit.

Cine vrea să fie flexibil, trebuie să poată specifica dimensiunea elementelor copil independente de lățimea sau de înălțimea concrete. Din fericire, există proprietatea flex-basis, cu care se poate realiza acest lucru. Schimbând flex-direction, putem transforma o lățime într-o înălțime și invers. 

Cu cât ar trebui să crească un element atunci când există mai mult spațiu decât specifică flex-basis? Aceasta poate fi reglată în mod specific folosind flex-grow.

Cu cât trebuie să se micșoreze un element atunci când există mai puțin spațiu decât cel specificat de flex-basis? Acest lucru poate fi setat cu ajutorul proprietății flex-shrink.

Elementele copil nu numai că se pot micșora atunci când spațiul este limitat, ci pot fi și îndoire de container. Cum să controlezi acest lucru folosind flex-wrap, îți voi arăta în acest videoclip.

flex-direction și flex-wrap pot fi specificate împreună în proprietatea flex-flow. Aceasta are sens chiar și atunci când dorești să setezi doar flex-direction, deoarece flex-flow este mai scurt. ;-)

O sarcină pentru flex-wrap.

Distanța trebuie să existe uneori pentru a nu face inutile disconfort ochiului uman. Din fericire, există o proprietate CSS numită gap care realizează exact acest lucru pentru elementele copil dintr-un container Flex.

Trebuie să existe ordine, în special în interfețele web, deoarece acestea ar trebui să fie ușor de utilizat. Ordinea trebuie uneori stabilită individual, fără a muta elementele în DOM. Pentru aceasta, proprietatea CSS order este foarte potrivită, cu ajutorul căreia se poate schimba cu ușurință ordinea vizibilă a elementelor.

Să vedem dacă ați înțeles cu adevărat ordinea. Aici există chiar și a doua posibilitate de a obține același rezultat, dar cu siguranță veți găsi și aceasta.

Se întâmplă foarte des ca cineva să dorească să centreze elemente și în special textul atât pe orizontală, cât și pe verticală (!). Ceea ce era o luptă înainte de Flexbox, devine un joc de copii cu Flexbox.

Cine nu-l cunoaște pe 3-colonar? Dacă acesta se potrivește încă în spațiul disponibil, nu mai lipsește mult până la design-ul responsiv.

Există site-uri web fără formulare? Dacă da, atunci nu sunt foarte multe. Prin urmare, este foarte important să le aranjați în mod atrăgător, lucru care, din fericire, nu reprezintă o problemă cu Flexbox.

Foarte des se lucrează cu aspecte încrucișate, dar cu Flex-Layout nici acestea nu mai sunt o provocare mare.

Între timp, există o mulțime de clienți de chat web și, cu roboții de chat AI, mai sunt și altele. Dar cum poți realiza un chat folosind Flexbox? Asta o să arăt în acest videoclip.

Cel puțin din era Web 2.0, poți găsi o galerie pe aproape orice site web. În acest videoclip, voi descrie cum un astfel de aspect poate fi implementat minunat cu ajutorul Flexbox-ului.

Acum totul ar trebui să fie clar în ceea ce privește Flex-Layout-ul. În final, voi descrie ce ar trebui să fiți învățat, ce mai puteți face și ce alte posibilități frumoase de CSS-Layout există.