Visi rīki

CSS Flexbox ģenerators

Interaktīvi konfigurējiet flex konteineru — virzienu, aplaušanu, izlīdzināšanu — un katram elementam pielāgojiet grow, shrink, basis un align-self. Tiešais priekšskatījums un tūlītēja CSS kopēšana.

3 items
1
2
3

Click an item to edit its properties below

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
Buy me a coffee

Konteinera īpašības

flex-direction: Nosaka galveno asi — row, row-reverse, column, column-reverse.
flex-wrap: Vai elementi aplaužas vairākās rindās — nowrap, wrap, wrap-reverse.
justify-content: Izlīdzināšana gar galveno asi.
align-items: Izlīdzināšana gar šķērsvidi vienā rindā.
align-content: Vairāku rindu izlīdzināšana (aktīvs tikai ar flex-wrap).

Elementa īpašības

flex-grow: Cik daudz elements aug, ja ir brīva vieta.
flex-shrink: Cik daudz elements saraujas, ja vietas trūkst.
flex-basis: Elementa sākotnējais izmērs pirms augšanas vai saraukšanās.
align-self: Pārsedz konteinera align-items šim elementam.

Saistītie rīki

CSS lodziņa ēnas ģenerātors

Vizuāli veido CSS lodziņa ēnas ar slaidēm. Vairāki ēnu slāņi, izplūšana, izplatība, krāsa un necaurredzamība.

CSS gradienta ģenerātors

Vizuāli veido skaistus CSS lineāros un radiālos gradientus. Pielāgo krāsas, pieturas un leņķi — kopē gatavo CSS.

CSS gradienta teksta ģenerātors

Izveido gradienta teksta efektus tiešsaistē. Izvēlas 2–4 krāsas, virzienu un kopē gatavo CSS background-clip kodu.

CSS mainīgo ģenerātors

Izveido pilnu CSS pielāgoto rekvizītu :root bloku krāsām, atstarpēm, tipografijai un apmales rādiusam.

CSS tīkla ģenerātors

Vizuāli veido CSS tīkla izkārtojumus. Konfigurē kolonnas, rindas, atstarpus un kopē ģenerēto CSS.

CSS apmales rādiusa ģenerātors

Vizuāli ģenerē border-radius CSS ar neatkarīgiem stūru vadīklām un tiešraides priekšskatījumu.

CSS teksta ēnas ģenerātors

Izveido slāņainus CSS teksta ēnu efektus ar tiešraides priekšskatījumu un viena klikšķa kopēšanu.

CSS filtra ģenerātors

Ģenerē CSS filtra efektus — izplūšanu, spilgtumu, kontrastu, krāsu rotāciju, piesātinājumu, sepiju un vairāk — ar attēlu priekšskatījumu.

CSS clip-path ģenerātors

Interaktīvi ģenerē CSS clip-path formas — poligonus, apļus un elipses — ar tiešraides priekšskatījumu. Velc vadīklas.

CSS animāciju ģenerātors

Vizuāli veido CSS @keyframe animācijas ar laika, atslābuma, aizkaves un atkārtošanās vadīklām.