CSS Flexbox ģenerators

Sarakstījusi un pārskatījusi BroBroGo redakcijas komanda.Pēdējo reizi atjaunināts: 2026-08-01

CSS Flexbox izkārtojuma pamati un vizualizācija

CSS Flexbox (Flexible Box Layout) ir izkārtojuma modelis, kas izstrādāts, lai efektīvi sadalītu vietu un izlīdzinātu elementus konteinerā, pat ja to izmēri ir nezināmi vai dinamiski. Šis rīks ļauj vizuāli konfigurēt flex konteineru un tā elementus, nodrošinot tūlītēju izmaiņu atspoguļojumu un gatava CSS koda ģenerēšanu.

Izmantojot vizuālos rīkus, izstrādātāji un dizaineri var ātrāk izprast dažādu flexbox īpašību mijiedarbību. Tā vietā, lai manuāli rakstītu kodu un pārlādētu pārlūkprogrammu, lietotājs manipulē ar vadīklām un uzreiz redz, kā mainās elementu izvietojums. Tas palīdz apgūt un praktiski pielietot flexbox principus reālos projektos.

Konteinera īpašību iestatīšana

Flexbox izkārtojuma pamatā ir konteiners, kuram tiek piešķirta īpašība display: flex. Šis rīks ļauj kontrolēt visas galvenās konteinera īpašības, kas nosaka tā bērnu elementu uzvedību:

Virziens: Nosaka galveno asi, pa kuru tiek izvietoti elementi. Iespējamās vērtības ir Rinda (row), Rinda apgriezti (row-reverse), Kolonna (column) un Kolonna apgriezti (column-reverse).
Ietīšana (Wrap): Nosaka, vai elementi tiek spiesti palikt vienā rindā, vai arī tie drīkst pāriet jaunās rindās. Vadīklas piedāvā izvēlēties starp Bez ietīšanas (nowrap), Ietīt (wrap) un Apgriezta ietīšana (wrap-reverse).
Satura izvietošana (justify-content): Atbild par elementu izlīdzināšanu gar galveno asi. Pieejamie režīmi ir Sākumā (flex-start), Beigās (flex-end), Centrā (center), Atstarpes starp (space-between) (space-between), Atstarpes apkārt (space-around) (space-around) un Vienmērīgas atstarpes (space-evenly) (space-evenly).
Līdzināt elementus (align-items): Nosaka elementu izlīdzināšanu šķērsasī. Iespējas ietver Sākumā (flex-start), Beigās (flex-end), Centrā (center), Izstiept (stretch) un Bāzes līnija (baseline).
Līdzināt saturu (align-content): Šī īpašība darbojas tikai tad, ja ir aktivizēta ietīšana un ir izveidojušās vairākas rindas. Tā nosaka šo rindu izvietojumu un piedāvā vērtības Sākumā, Beigās, Centrā, Izstiept, Atstarpes starp (space-between), Atstarpes apkārt (space-around) un Vienmērīgas atstarpes (space-evenly).
Sprauga (Gap): Skaitliska vērtība, kas definē tiešu attālumu starp elementiem un starp rindām, neizmantojot ārējās malas (margins).

Elementu individuālā pielāgošana

Katram flex konteinera bērna elementam var definēt individuālas uzvedības kārtulas. Rīka sadaļā "Elementi" ir iespējams atlasīt konkrētu elementu un mainīt tā parametrus:

Secība (Order): Skaitliska vērtība, kas maina elementa vizuālo novietojumu izkārtojumā, neietekmējot HTML struktūru.
Izplešanās (Grow): Skaitlis, kas nosaka, cik lielu daļu no brīvās vietas konteinerā elements drīkst aizņemt attiecībā pret citiem elementiem.
Saraušanās (Shrink): Skaitlis, kas nosaka elementa spēju samazināties, ja konteinerā nepietiek vietas.
Pamats (basis): Elementa sākuma izmērs pirms brīvās vietas sadalīšanas. To var iestatīt kā skaitlisku vērtību vai izvēlēties Automātisks pamats (auto basis).
Līdzināt sevi (align-self): Ļauj pārrakstīt konteinera align-items noteikto līdzinājumu konkrētajam elementam. Pieejamās opcijas ir Automātiski (auto), Sākumā, Beigās, Centrā, Izstiept un Bāzes līnija.

Noklikšķinot uz pogas "Pievienot elementu", izkārtojumam tiek pievienots jauns elements (piemēram, "Item 5"). Svarīga rīka īpatnība ir tā, ka CSS kods tiek ģenerēts tikai tiem elementiem, kuru noklusējuma īpašības ir tikušas mainītas.

Asu mijiedarbība un ietīšanas loģika

Izprotot flexbox darbību, galvenais ir saprast sakarību starp galveno asi (main axis) un šķērsasi (cross axis). Kad virziens tiek mainīts no rindas uz kolonnu, šīs asis mainās vietām. Tas nozīmē, ka justify-content un align-items funkcijas mainās par 90 grādiem.

Ja ietīšana ir izslēgta (Bez ietīšanas), visi elementi tiek spiesti atrasties vienā rindā, pat ja to kopējais platums pārsniedz konteinera izmēru. Šādā gadījumā elementi var tikt saspiesti atbilstoši to Shrink parametriem. Kad ir ieslēgta opcija Ietīt, elementi, kas neietilpst pašreizējā rindā, pārlec uz nākamo rindu. Tikai šajā daudzrindu režīmā sāk darboties align-content īpašība, kas kontrolē rindu grupas izvietojumu šķērsasī.

Biežāk izmantotie izkārtojuma šabloni

Flexbox ir piemērots daudzu standarta tīmekļa dizaina elementu izveidei. Rīkā ir iebūvētas sagataves, kas demonstrē šādus populārus izkārtojumus:

Centrēt: Izmanto, lai novietotu vienu elementu precīzi konteinera vidū gan horizontāli, gan vertikāli.
Navigācijas josla: Elementi tiek izvietoti rindā ar vienmērīgām atstarpēm vai izkliedēti pa malām, izmantojot space-between.
Grēda: Elementi tiek kārtoti vertikālā stabiņā (kolonnā), nodrošinot vienmērīgu plūsmu.
Kartītes: Režģa veida izkārtojums ar ietīšanu, kur elementi pielāgojas ekrāna platumam.
Sānu josla: Divu kolonnu izkārtojums, kur viena daļa kalpo kā fiksēta vai elastīga sānu izvēlne, bet otra aizņem atlikušo vietu.

Šie šabloni palīdz ātri uzsākt darbu un nodrošina responsīvu dizainu, kas pielāgojas dažādiem ekrāna izmēriem.

Datu apstrāde un privātums

Lietotāja privātums ir pilnībā aizsargāts, jo visa izkārtojuma izveide un koda ģenerēšana notiek lokāli lietotāja ierīcē. Jūsu izkārtojums tiek veidots tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.

Pēc tam, kad vēlamais izkārtojums ir izveidots, noklikšķinot uz pogas "Kopēt CSS", ģenerētais kods tiek saglabāts starpliktuvē, un pogas teksts nomainās uz "Copied".

Biežāk uzdotie jautājumi (FAQ)

Kāda ir atšķirība starp justify-content un align-items?

Justify-content izvieto elementus gar galveno asi — virzienu, kurā plūst rinda vai kolonna —, savukārt align-items pozicionē tos šķērsām otrai asij. Mainot virzienu no rindas uz kolonnu, abas asis mainās vietām, tāpēc justify-content sāk darboties no augšas uz leju, bet align-items — no kreisās uz labo pusi.

Kā darbojas atsevišķu elementu vadība?

Izvēlieties elementu pēc tā numura, pēc tam iestatiet, cik daudz tas izplešas (grow), lai aizpildītu brīvo vietu, cik daudz tas saraujas (shrink), kad vietas ir maz, tā sākuma izmēru (basis) un tā paša līdzinājumu šķērsasij. Secība (order) pārvieto elementu agrāk vai vēlāk ekrānā, neaiztiekot HTML kodu. Tikai tie elementi, kurus jūs faktiski maināt, saņem savu kārtulu CSS kodā.

Kad ir svarīgi wrap un align-content?

Ja ietīšana (wrap) ir izslēgta, visi elementi tiek spiesti vienā rindā un var tikt saspiesti šaurāki. Ieslēdzot to, elementi, kas vairs neietilpst, pārlec uz nākamo rindu — šajā brīdī kontroli pārņem align-content, izvietojot rindas kā grupu. Gap iestata atstarpi starp elementiem un starp rindām bez ārējām malām (margins).

BUJ