Ƙirƙirar Matsalolin Flexbox cikakke

Haɓaka, keɓancewa, da samar da lambar CSS flexbox tare da ilhamar ja-da-saukar da mu.

Kayan Kwantena

Abubuwan Abubuwan Abu

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Ƙirƙirar lambar CSS

Shahararrun Saitunan Flexbox

A tsaye

Content

Cikakke don sanya tambari, maɓalli, ko kowane abu a kwance da kuma a tsaye.

Daidaita Tazara

Item 1
Item 2
Item 3

Ƙirƙiri daidaitaccen tazara tsakanin abubuwa tare da sarari-tsakanin ko sarari-kewaye.

Menu na tsaye

Home
About
Contact

Gina menu na kewayawa tsaye tare da daidaiton tazara da jeri.

Grid mai amsawa

Box 1
Box 2
Box 3
Box 4
Box 5

Ƙirƙiri shimfidar grid mai amsawa wanda ke naɗe abubuwa dangane da sararin samaniya.

Banner Jarumi

Babban Take

Sashen jarumai tare da kira zuwa aiki

Zana banner na gwarzo tare da take, subtitle, da maɓallin kira-zuwa-aiki.

Tsarin Kafa

Company

About Us

Careers

Support

Cibiyar Taimako

Tuntube Mu

© 2023 Flexbox Generator

Gina ƙafa mai amsawa tare da ginshiƙai waɗanda ke tattare akan ƙananan allo.

Misalai na Hakikanin Duniya

Bar Kewayawa

Logo
Home
Products
About
Contact

Tsarin mashaya kewayawa na gama gari tare da tambari a hagu, abubuwan menu a tsakiya, da gunkin kututture a dama.

Card Grid

Taken Kati

Rubutun bayanin katin nan

Taken Kati

Rubutun bayanin katin nan

Taken Kati

Rubutun bayanin katin nan

Gudun katin amsawa wanda ya dace da girman allo daban-daban ta amfani da kaddarorin flexbox.

Layout Labari

Taken Labari

An buga ranar 1 ga Janairu, 2023 · karanta min 5

Abun labarin anan. Wannan na iya zama taƙaitaccen bayani ko cikakken rubutun labarin. Flexbox yana taimakawa daidaita hoto da rubutu a hanya mai ban sha'awa.

Tsarin labarin gama gari tare da hoto a hagu da abun ciki na rubutu a dama, wanda aka tara akan na'urorin hannu.

Dashboard Layout

Header
Sidebar
Babban Abun ciki
Footer

Tsarin dashboard tare da kai, mashaya na gefe, babban yanki na abun ciki, da ƙafar ƙafa ta amfani da flexbox don duka a kwance da daidaitawa.

Flexbox Fundamentals

Menene Flexbox?

Layout Akwati mai sassauƙa, wanda akafi sani da Flexbox, ƙirar shimfidar CSS3 ce wacce ke ba da ingantacciyar hanya don rarrabawa da daidaita sarari tsakanin abubuwa a cikin akwati, ko da ba a san girmansu ko ƙarfi ba.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Mabuɗin Mabuɗin:Flexbox yana gabatar da manyan dabaru guda biyu: dakwandon sassauƙa and the sassauƙan abubuwa. Kwantena shine kashi na iyaye, kuma abubuwan sune 'ya'yansa kai tsaye.

Main Axis vs Cross Axis

Shirye-shiryen Flexbox sun dogara ne akan gatura biyu: damain axis and the giciye axis.

  • Babban Axis:Axis na farko wanda aka shimfiɗa abubuwa masu sassauƙa. Ma'anarsa taflex-direction.
  • Cross Axis:The axis perpendicular zuwa babban axis. Hanyarsa ta dogara da babbar hanyar axis.
Babban Axis →
← Cross Axis
Start
Main
End

Kayan Kwantena

Property Description
display Yana bayyana akwati mai sassauƙa; layi ko toshe dangane da ƙimar da aka bayar.
flex-direction Yana kafa babban axis, don haka ma'anar jagorar abubuwa masu sassaucin ra'ayi an sanya su a cikin akwati mai sassauƙa.
flex-wrap Ta hanyar tsoho, abubuwa masu sassauƙa za su yi ƙoƙarin dacewa da layi ɗaya. Kuna iya canza wannan kuma ku ƙyale abubuwan su nannade kamar yadda ake buƙata tare da wannan kadarar.
justify-content Yana daidaita abubuwa masu sassauƙa tare da babban kusurwoyi na layin yanzu na kwantena mai sassauƙa.
align-items Yana daidaita abubuwa masu sassauƙa tare da madaidaicin giciye na layin yanzu na kwantena mai sassauƙa.
align-content Yana daidaita layin kwantena mai sassauƙa a cikin lokacin da akwai ƙarin sarari a cikin giciye.

Abubuwan Abubuwan Abu

Property Description
order Ta hanyar tsoho, abubuwa masu sassauƙa ana shimfida su a cikin tsarin tushen. Duk da haka, daorderdukiya tana sarrafa tsarin da suke bayyana a cikin akwati mai sassauci.
flex-grow Yana bayyana ikon abu mai sassauƙa don girma idan ya cancanta. Yana karɓar ƙima mara ƙima wanda ke aiki azaman rabo.
flex-shrink Yana bayyana ikon abu mai sassauƙa don raguwa idan ya cancanta.
flex-basis Yana bayyana girman farkon abu mai sassauƙa kafin a rarraba kowane sarari da ake da shi bisa ga abubuwan sassauƙa.
align-self Yana ba da damar jeri na asali (ko wanda aka ƙayyade taalign-items) da za a wuce gona da iri ga daidaikun abubuwa masu sassauƙa.

Related Tools

Ƙirƙirar Matsalolin Flexbox cikakke

Haɓaka, keɓancewa, da samar da lambar CSS flexbox tare da ilhamar ja-da-saukar da mu.

Stylus zuwa CSS Converter

Canza lambar SCSS ɗin ku zuwa CSS. Mai sauri, mai sauƙi, kuma amintacce.

SCSS zuwa CSS Converter

Canza lambar SCSS ɗin ku zuwa CSS. Mai sauri, mai sauƙi, kuma amintacce.

Canza CSS zuwa SCSS

Canza lambar CSS ɗin ku zuwa SCSS tare da masu canji, gida, da ƙari. Mai sauri, mai sauƙi, kuma amintacce.

HSV zuwa RGB

Maida lambobin launi na HSV zuwa ƙimar RGB don ci gaban yanar gizo

Canjin Wutar Lantarki

Canza tsakanin raka'o'in lantarki daban-daban tare da madaidaicin lissafin injiniyan ku