Ghid pentru începători pentru proprietățile Flexbox CSS

Aspect bun începe cu un model clar pentru aliniere și distanțare. FlexBox furnizează acel model prin organizarea de conținut de -a lungul unei singure axe, cu control previzibil asupra direcției, alinierii, ambalajului și decalajului.

Acest post acoperă elementele de bază ale acestor proprietăți CSS și modul în care lucrează împreună. După fundamentele, arătăm cum aceeași abordare este implementată vizual în DIVI 5 folosind sistemul de aspect FlexBox. Hai să mergem la ea!

Ce este CSS FlexBox?

Desktop de depășire a traficului mobil a schimbat designul web. Dezvoltatorii au avut nevoie de machete care să funcționeze pe telefoane, tablete și desktop -uri. Metodele vechi au eșuat adesea.

FlexBox a rezolvat acest lucru. CSS FlexBox face ca elementele să se adapteze. Adăugați afișaj: flexați -vă într -un recipient, iar copiii săi direcți devin flexibili. Ele pot crește, micșora sau rămân fixate în funcție de spațiu.

FlexBox pune elemente într -o linie dreaptă, fie rânduri de la stânga la dreapta, fie coloane de sus în jos. Alegeți direcția.

Containerul controlează aspectul. Stabiliți cum se aliniază și se spaționează articolele, cum ar fi răspândit uniform, centrat sau stivuit. Proprietatea GAP adaugă un spațiu constant între articole fără marje suplimentare sau căptușeală. Tehnicile mai vechi au necesitat matematica cu marjă complicată și s -au rupt des.

Metoda tradițională face alegeri aleatorii de distanțare: 10px aici, 20px acolo, 40px în altă parte. Aceste valori împrăștiate provoacă inconsecvențe și îngreunează ce distanțare se aplică. Proprietățile GAP elimină ghicitul folosind o regulă consistentă pentru toate elementele.

Un ghid rapid pentru FlexBox și proprietățile sale

FlexBox se împarte în două tabere: proprietăți pentru containere și proprietăți pentru articole. Proprietățile containerului afectează întregul grup, în timp ce proprietățile articolului vă permit să reglați elemente individuale. Majoritatea machetei au nevoie doar de o mână de aceste proprietăți, cum ar fi:

Afișare: flex

Transformați orice element într -un recipient flex prin adăugarea de afișare: flex. Copiii săi direcți devin articole flexibile. Elementele se aliniază la rând în mod implicit în loc să stivuiești ca elementele de bloc standard. Durerile de cap distanțare dispar, deoarece elementele flexibile respectă reguli diferite decât elementele obișnuite. Containerul controlează acum modul în care se comportă copiii (sau articolele) și obțineți rezultate previzibile în loc de surprizele obișnuite ale CSS.

Direcție flexibilă

Alegeți ce elemente de direcție curg. Folosiți un rând pentru aranjamentul de la stânga la dreapta.

și o coloană pentru a stiva articole vertical.

Adăugați invers la unul, iar elementele își reduc comanda complet.

Această alegere stabilește axa dvs. centrală, ceea ce afectează modul în care funcționează alte proprietăți.

Trecerea de la rând la coloană modifică modul în care se comportă conținutul și alinierea justificației, deci direcția vine mai întâi în planificarea ta.

justifica-content

Această proprietate distribuie spațiu rămas de -a lungul axei tale centrale. Articolele iau ceea ce au nevoie și apoi această proprietate se ocupă de restul. Folosiți Flex-Start pentru a grupa totul la început, centrați-vă pentru a cluster articolele din mijloc și flex-end pentru a pune totul spre sfârșit. În același timp, spațiul este folosit pentru a răspândi obiecte cu lacune egale. Valoarea spațiului oferă fiecărui articol un spațiu egal pe ambele părți, în timp ce spațiul-chiar creează lacune identice peste tot.

aliniați-itemi

Se ocupă de alinierea pe axa încrucișată. Pentru machete orizontale, aceasta înseamnă aliniere verticală. Pentru machete verticale, controlează poziționarea orizontală. Suportă valori precum Flex-Start, Center, Flex-End, Stretch și Baseline (nu valorile Space-*). Setați -l la centru și obiectele se aliniază la mijloc, indiferent de înălțimile lor. Valoarea implicită este întinsă: elementele se întind pentru a umple dimensiunile încrucișate ale containerului. Dacă dimensiunea încrucișată a containerului este automată, aceasta este egală adesea cu cel mai înalt articol, astfel încât elementele să pară egale în înălțime.

Flex-WRAP

Decide ce se întâmplă atunci când articolele rămân fără cameră. Nowrap implicit păstrează totul pe o linie prin micșorarea elementelor. Treceți la înveliș și articole care nu se potrivesc cu linii noi, menținând în același timp dimensiunile preferate. Puteți inversa și direcția de ambalare. Înfășurarea îți transformă linia unică în mai multe linii, creând machete care seamănă cu grile.

decalaj

Adăugă spațiu între articole fără a încurca cu marje. Setați GAP: 20px și fiecare articol primește o distanțare constantă. Puteți seta diferite lacune orizontale și verticale, dacă este necesar. Spațiul apare doar între articole, nu în jurul marginilor. Acest lucru bate marjele care calculează care se rup atunci când schimbați machete mai târziu.

Aceste proprietăți funcționează bine odată ce le primiți. Partea complicată este să -ți amintești ce face fiecare și tastând tot ce CSS. Scrieți un cod, reîmprospătați browserul, vedeți că nu este chiar corect, apoi mergeți înapoi și ajustați -vă. Constructorii vizuali precum Divi se aruncă acest lucru, permițându -vă să faceți clic pe butoane în loc să tastați numele de proprietăți.

Divi 5 face ca FlexBox să fie vizual

După cum am stabilit, învățarea FlexBox este un lucru; Amintirea a ceea ce justifica-content: Space-Between face este altul. Petreci mai mult timp tastând proprietăți decât proiectarea. În loc să scrieți CSS, utilizați butoane și glisoare care arată exact ce face fiecare opțiune în Divi Builder. Divi 5 aduce acest lucru la FlexBox, transformând conceptele abstracte în controale simple, clic pe clic.

Înainte de a ne scufunda mai adânc, să ne uităm pe scurt la ce este Divi.

Ce este Divi?

Divi este un constructor de site-uri care face WordPress să funcționeze pentru persoanele care doresc site-uri cu aspect bun, fără probleme.

Puteți trage orice 200 de module în jurul paginii dvs. și puteți schimba textul acolo unde se află. Alegeți culorile și urmăriți -le apărând instantaneu în timp ce lucrați pe site -ul real, nu o previzualizare care v -ar putea minți mai târziu.

Tema include peste 2000 de machete pentru restaurante, fotografi, consultanți și alte afaceri, astfel încât să puteți găsi una care vă place și să o reglați până când funcționează perfect pentru nevoile dvs.

Constructorul de teme vă oferă control asupra fiecărei părți a site -ului dvs. Puteți proiecta anteturi care ies în evidență în loc să arate ca toți ceilalți, să construiți pagini de blog pe care oamenii doresc să le citească și chiar să vă facă 404 de pagini suficient de interesante încât vizitatorii să se lipească în loc să plece.

Divi AI vă ajută să vă construiți rapid

Odată, a face teme și șabloane a însemnat jonglarea diferitelor aplicații pentru copie, imagini și idei de proiectare. Divi Ai adună tot ce ai nevoie într -o interfață unificată: chiar unde îți construiești site -urile web.

Spune -i că ai nevoie de text și îl scrie.

Cereți imagini personalizate și le creează. Puteți descrie chiar și modificările de fotografii și urmăriți -l să facă modificările.

În plus, gestionează codul și construiește secțiuni noi atunci când întrebați.

Site -urile rapide Divi vă salvează să vă uitați la o pagină goală, fără să știți de unde să începeți. Puteți alege de pe site -urile de pornire pe care le -a proiectat echipa noastră, cu imagini originale și lucrări de artă care arată bine.

De asemenea, puteți descrie afacerea dvs. pe site -urile rapide și să o lăsați să construiască ceva de la zero folosind AI. Aceste site-uri construite AI vin cu titluri reale, copiere și imagini care se potrivesc cu descrierea dvs.

Generați totul cu AI, faceți fotografii de la Unsplash sau aruncați în localități pentru imaginile dvs. Stabiliți -vă mai întâi fonturile și culorile, apoi lăsați AI să funcționeze în jurul alegerilor dvs. de marcă, păstrând totul editabil ulterior.

DIVI 5: Constructorul de site-uri web rezistent la viitor

Divi 5 reconstruiește întregul cadru de la sol.

Visual Builder rulează mai ușor, paginile redă mai rapid, iar codebase poate suporta mai eficient standardele web moderne. Obțineți un marcaj mai curat, o performanță mai bună și o fundație pregătită pentru prezent și viitor.

De asemenea, interfața este simplificată. Setările apar mai organizate mai logic, iar sarcinile de zi cu zi necesită mai puține clicuri. Experiența generală se simte mai receptivă, indiferent dacă construiți pagini simple sau machete complexe.

Obțineți aceeași abordare a clădirii vizuale pe care o cunoașteți, doar cu o fundație mult mai puternică dedesubt.

Ce este nou în Divi 5

Noua arhitectură deschide ușile pentru caracteristici care nu erau posibile înainte. Aceste 18+ completări schimbă modul în care construiți și gestionați site -urile web.

Iată un exemplu despre ceea ce obțineți:

• Sistem de aspect FlexBox: Controluri vizuale pentru aliniere, distanțare și poziționare. Elementele pot crește, micșora sau se înfășoară automat la linii noi. Funcționează cu rânduri și grupuri de module cuibărite pentru machete complexe fără cod.
• Rânduri cuibărite: Puneți rânduri în alte rânduri cu cuiburi infinite. Construiți structuri complexe de dispunere fără soluții de soluționare a codului.
• 17 Module WooCommerce: Constructori de pagini de produse complete, inclusiv galeria de produse, adăugați la coș, recenzii, evaluări, avize de stoc, pesmet, meta -meta, upsells și multe altele. Modulele de cărucior și checkout vor veni în curând.
• Sistem de interacțiuni: creați pop-up, comutații, animații de defilare, efecte de mișcare a mouse-ului și declanșatoare de vizor. Amestecați mai multe declanșatoare pentru comportamente complexe, cum ar fi bannerele promoționale care se estompează după defilare.
• Editor receptiv: Vă permite să vizualizați, să editați și să resetați Stările de vârf și lipicioase pentru orice setare simultan, fără a comuta moduri de vizualizare pentru o editare mai rapidă, mai precisă și mai puțin aglomerată.>
• Buclă Builder: Construiți conținut dinamic care trage din baza de date. Creați machete de post personalizate, grile de produse și secțiuni repetate. Funcționează cu produse WooCommerce.
• Presetări de grupuri de opțiuni: Creați stiluri reutilizabile pentru tipografie, granițe, umbre și fundaluri. Aplicați -le pe orice element compatibil, nu doar pe module unice.
• Variabile de proiectare: Setați valori globale pentru culori, fonturi, distanțare, numere, imagini și text. Schimbați -vă culoarea primară o dată și se va actualiza automat peste tot.
• Unități CSS avansate: Utilizați funcții Clamp (), Calc (), Min () și Max () prin controale vizuale. Nu este necesar un cod pentru tipografia și calculele de distanțare sensibile.
• Culori relative și HSL: Creați sisteme de culori frumoase din punct de vedere matematic. Construiți variații de culoare care mențin automat armonia atunci când culoarea de bază este modificată.

Și mai vine! Echipa noastră de dezvoltare continuă să adauge funcții ~ la fiecare două săptămâni în timp ce se pregătesc pentru lansarea publică Beta.

O imagine de ansamblu rapidă a configurației FlexBox Divi 5

Abordarea vizuală a Divi 5 elimină ghicitul din implementarea FlexBox. În loc să memorați numele de proprietăți și să tastați CSS, primiți butoane și glisiere care arată exact ceea ce face fiecare control. Aruncați o privire la cât de ușor este.

1. Configurarea primului dvs. rând flex

Începeți prin a alege structura rândului dvs. din selecția de șabloane extinse. Divi 5 oferă multe alte opțiuni de aspect, inclusiv coloane egale, grile cu mai multe rânduri și configurații cu mai multe coloane.

Secțiunile noi din DIVI 5 încep automat cu FlexBox. Când adăugați un rând proaspăt, este gata cu Flex Properties pornit. Dar dacă lucrați cu secțiuni existente de la versiunile DIVI mai vechi, va trebui să le treceți manual de la aspectul blocului implicit la Flex, făcând clic pe pictograma Setări de pe rând, navigând la fila de proiectare> aspectul și schimbând „Block” în „Flex”.

2. Înțelegerea direcției, fluxului, alinierii

Câmpul dvs. de direcție de aspect determină unde se termină elementele. Row este setarea implicită, care face ca elementele să se alinieze pe orizontală.

Treceți la coloană, iar elementele stivuiește elemente pe verticală, precum machete web obișnuite.

Ambele opțiuni vin cu versiuni inverse care reduc comanda complet.

Între timp, justificați conținutul decide ce se întâmplă cu spațiul rămas de -a lungul axei principale. Pentru rânduri, pornirea înseamnă stânga, centrele de mijloc pe orizontală și sfârșitul se aliniază la dreapta.

Pentru coloane, pornirea înseamnă partea superioară, centrele de mijloc, iar sfârșitul împinge elementele în jos.

Dincolo de alinierea standard de pornire, centru și final, aveți, de asemenea, spațiu între articole de răspândire, cu lacune egale, perfecte pentru meniuri de navigare sau machete de cărți.

Spațiul din jur oferă fiecărui articol o cameră de respirație egală pe ambele părți, ceea ce este util atunci când doriți marje consistente. Și, spațiul creează uniform lacune identice peste tot, ideale pentru distanțarea vizuală echilibrată.

Alinierea articolelor funcționează perpendicular pe direcția dvs. de curgere. Dacă alegeți aspectul rândului, acest lucru controlează poziționarea verticală a elementelor.

Dacă ați ales aspectul coloanei, se ocupă de alinierea orizontală.

Centrul menține totul aliniat la mijloc, startul poziționează elementele la marginea de început, sfârșitul le împinge până la marginea îndepărtată, iar întinderea face ca articolele să umple spațiul disponibil.

Aceste controale rezolvă durerile de cap comune de aspect fără calcule CSS personalizate.

3.. Distanța lucrurilor cu controale de decalaj

Controalele GAP adaugă spațiu între elementele Flex din containerul dvs .: coloane, module și orice lucru de tip de conținut. GAP -urile creează o cameră de respirație fără căptușeală dezordonată sau matematică marjă. Decalajul apare doar între articole, nu în jurul marginilor exterioare.

Setați decalajul orizontal la 20px și fiecare coloană va avea această distanțare exactă.

Schimbați decalajul vertical la 20px și toate lacunele se vor actualiza instantaneu.

Divi 5 acceptă unități CSS avansate, cum ar fi lungimile și procentele de vizionare. Puteți utiliza Clamp () pentru goluri receptive care se scala între dimensiunile ecranului. Funcția Calc (), care combină unități precum Calc (2rem + 10px), este de asemenea acceptată.

Controalele GAP aici acceptă, de asemenea, variabile de proiectare. Adăugați o variabilă de număr numită „Gap de coloană orizontală” cu clemă (16px, 2VW, 32px) ca valoare. Aplicați această variabilă la controalele GAP pe site -ul dvs.

Când doriți o distanțare mai strânsă mai târziu, editați variabila; Fiecare decalaj se va actualiza instantaneu.

4. Controlul modului în care se înfășoară elementele

Înfășurarea aspectului controlează ce se întâmplă atunci când elementele rămân fără spațiu orizontal. Setarea implicită fără înveliș menține totul pe o linie prin micșorarea articolelor pentru a se potrivi cu containerul. Treceți la înveliș și articole care nu se potrivesc cu linii noi, păstrându -și dimensiunile naturale.

Wrap Reverse face același lucru ca și învelișul obișnuit, dar aruncă direcția. Liniile noi apar mai presus de cele anterioare în loc de mai jos.

Acest lucru vă oferă controlul asupra ierarhiei vizuale atunci când elementele se revarsă. Comportamentul de înfășurare rămâne consecvent pe diferite dimensiuni ale ecranului, astfel încât aspectul dvs. se adaptează previzibil de la desktop la mobil, fără a se rupe.

Divi 5 vă oferă, de asemenea, controale de aliniere a ambalajului. Această caracteristică apare automat atunci când activați forme de ambalare Flex și mai multe linii. Când direcția este setată pe rând, alinierea ambalajului este disponibilă pentru aliniere verticală.

De asemenea, pentru direcția coloanei, opțiunile sunt pentru alinierea orizontală.

Stretch face ca toate liniile să se extindă pentru a umple spațiul vertical disponibil. Începeți buchete de linii la început, centrale în centrul mijlocii și se termină împingându -le spre marginea opusă.

Spațiu între liniile răspândite cu goluri egale, spațiul din jur oferă fiecărei linii o cameră de respirație egală pe ambele părți, iar spațiul creează uniform lacune identice între toate liniile.

Acest lucru funcționează excelent pentru machetele de carduri, galeriile de imagini sau orice conținut care trebuie să curgă în mod natural pe mai multe rânduri. Articolele își mențin proporțiile și distanțarea, în timp ce reorganizați pe baza lățimii disponibile. Obțineți pauze curate, fără ca articolele să fie zdrobite împreună pe ecrane mici.

5. Lucrul pe diferite dimensiuni ale ecranului

Cele șapte puncte de întrerupere ale Divi 5 vă oferă un control granular asupra modului în care se adaptează aspectul dvs.

Fiecare punct de întrerupere funcționează independent, astfel încât să puteți schimba direcția de dispunere la coloana pe mobil în timp ce aspectul rândului desktop rămâne neatins. S -ar putea să centrați totul pe telefoane, dar să păstrați spațiul între aliniere pe ecrane mai mari.

Configurația dvs. cu trei coloane pe desktop poate deveni o stivă cu o singură coloană pe mobil, fără a afecta punctele de întrerupere din mijloc. Fiecare dimensiune a ecranului obține exact ceea ce funcționează cel mai bine pentru această experiență de vizionare.

Noul editor receptiv face ca acest proces să fie mult mai neted. Faceți clic pe pictograma editorului receptiv de lângă orice setare pentru a vizualiza și modifica valorile pentru toate dimensiunile ecranului simultan.

Cu toate acestea, dacă utilizați valori CLAMP () pentru a vă reduce rândurile și coloanele, acest lucru ar scădea automat între punctele de întrerupere fără a necesita modificări manuale.

6. Crearea presetărilor de grupuri de opțiuni

După ce obțineți aspectul FlexBox funcționând așa cum doriți, puteți salva aceste setări ca un grup de opțiuni presetat făcând clic pe opțiunea de presetări de grupuri de opțiuni și etichetându -l în mod adecvat.

Valorile dvs. de gol, alegerile de aliniere și setările de înfășurare sunt incluse împreună. Când faceți clic pe Salvare, acea configurație de aspect exactă devine reutilizabilă pe site -ul dvs. Când doriți să utilizați presetarea salvată, faceți clic pe pictograma presetată de pe noul rând și selectați presetarea pe care tocmai ați salvat -o.

Presetarea îți menține unitățile avansate intacte. Transferurile dvs. de distanțare receptive cu toată matematica pe care ați configurat -o, iar modificările au fost chiar făcute pe diferite puncte de întrerupere.

Începeți astăzi cu FlexBox -ul Divi 5

FlexBox elimină marja și matematica de căptușeală care se rupe atunci când schimbați machete. Stoneți să vă lăsați cu design receptiv cu interogări media și secțiuni personalizate.

Divi 5 transformă aceste proprietăți CSS abstracte în controale vizuale. Puteți face clic pe butoane pentru a seta direcția, trageți glisoarele pentru a regla lacunele și pentru a comuta și dezactiva ambalarea și dezactivarea. Editorul receptiv se ocupă de toate cele șapte puncte de întrerupere dintr -un singur panou, așa că vedeți rezultate instantaneu în loc să ghiciți la cod.

Salvați combinații de succes ca presetări și reutilizați -le oriunde. Petreceți timp proiectarea în loc să depanați sintaxa CSS.