Unda Mipangilio Kamili ya Flexbox

Taswira, kubinafsisha, na kutoa msimbo wa CSS flexbox kwa kiolesura chetu angavu cha kuburuta na kudondosha.

Mali ya Kontena

Mali ya bidhaa

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; }
Msimbo wa CSS uliozalishwa

Mipangilio maarufu ya Flexbox

Kituo kwa usawa na wima

Content

Inafaa kwa kuweka nembo, kitufe, au kipengele chochote kwa usawa na wima.

Nafasi sawa

Item 1
Item 2
Item 3

Unda nafasi sawa kati ya vipengele vilivyo na nafasi-kati au nafasi-kuzunguka.

Menyu ya Wima

Home
About
Contact

Jenga menyu ya urambazaji wima na nafasi thabiti na mpangilio.

Gridi ya msikivu

Box 1
Box 2
Box 3
Box 4
Box 5

Unda mpangilio wa gridi ya taifa unaofunga vitu kulingana na nafasi inayopatikana.

Bendera ya shujaa

Kichwa kikuu

Sehemu ya shujaa yenye wito wa kuchukua hatua

Tengeneza bango la shujaa lenye kichwa, manukuu, na kitufe cha wito wa kuchukua hatua.

Mpangilio wa Footer

Company

About Us

Careers

Support

Kituo cha Msaada

Wasiliana nasi

© Jenereta ya Flexbox ya 2023

Jenga kijachini cha msikivu na nguzo ambazo huwekwa kwenye skrini ndogo.

Mifano ya ulimwengu halisi

Upau wa Urambazaji

Logo
Home
Products
About
Contact

Mpangilio wa kawaida wa upau wa kusogeza na nembo upande wa kushoto, vitu vya menyu katikati, na ikoni ya gari upande wa kulia.

Card Grid

Kichwa cha kadi

Maandishi ya maelezo ya kadi hapa

Kichwa cha kadi

Maandishi ya maelezo ya kadi hapa

Kichwa cha kadi

Maandishi ya maelezo ya kadi hapa

Gridi ya kadi msikivu ambayo inabadilika kwa saizi tofauti za skrini kwa kutumia sifa za flexbox.

Mpangilio wa Makala

Kichwa cha Kifungu

Iliyotumwa mnamo Januari 1, 2023 · Dakika 5 kusoma

Yaliyomo kwenye kifungu hapa. Hii inaweza kuwa muhtasari mfupi au maandishi kamili ya makala. Flexbox husaidia kuoanisha picha na maandishi kwa njia ya kuvutia.

Mpangilio wa kawaida wa makala na picha upande wa kushoto na maudhui ya maandishi upande wa kulia, yaliyowekwa kwenye vifaa vya rununu.

Mpangilio wa Dashibodi

Header
Sidebar
Maudhui kuu
Footer

Mpangilio wa dashibodi na kichwa, upau wa pembeni, eneo kuu la yaliyomo, na kijachini kwa kutumia flexbox kwa mpangilio wa usawa na wima.

Misingi ya Flexbox

Flexbox ni nini?

Mpangilio wa Sanduku Linalobadilika, unaojulikana kama Flexbox, ni muundo wa mpangilio wa CSS3 ambao hutoa njia bora ya kusambaza na kuoanisha nafasi kati ya vitu kwenye chombo, hata wakati saizi yao haijulikani au inabadilika.

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).

Dhana muhimu:Flexbox inatanguliza dhana kuu mbili:Chombo cha kubadilika and the Vitu vya kubadilika. Chombo ni kipengele cha mzazi, na vitu ni watoto wake wa moja kwa moja.

Mhimili Mkuu dhidi ya Mhimili wa Msalaba

Mipangilio ya Flexbox inategemea shoka mbili:main axis and the mhimili wa msalaba.

  • Mhimili Mkuu:Mhimili wa msingi ambao vitu vya flex vimewekwa. Imefafanuliwa naflex-direction.
  • Mhimili wa Msalaba:Mhimili perpendicular kwa mhimili kuu. Mwelekeo wake unategemea mwelekeo kuu wa mhimili.
Mhimili Mkuu →
← Mhimili wa Msalaba
Start
Main
End

Mali ya Kontena

Property Description
display Inafafanua chombo kinachobadilika; inline au block kulingana na thamani iliyotolewa.
flex-direction Huanzisha mhimili kuu, na hivyo kufafanua mwelekeo vitu vinavyobadilika vimewekwa kwenye chombo cha flex.
flex-wrap Kwa chaguo-msingi, vitu vinavyobadilika vyote vitajaribu kutoshea kwenye mstari mmoja. Unaweza kubadilisha hiyo na kuruhusu vitu vifunike kama inahitajika na mali hii.
justify-content Inapangilia vitu vinavyobadilika kando ya mhimili kuu wa mstari wa sasa wa chombo cha flex.
align-items Hupangilia vitu vinavyobadilika kando ya mhimili wa msalaba wa mstari wa sasa wa chombo cha flex.
align-content Hupangilia mistari ya kontena linalobadilika ndani wakati kuna nafasi ya ziada kwenye mhimili wa msalaba.

Mali ya bidhaa

Property Description
order Kwa chaguo-msingi, vitu vinavyobadilika vimewekwa kwa mpangilio wa chanzo. Hata hivyo,orderMali inadhibiti mpangilio ambao zinaonekana kwenye chombo cha flex.
flex-grow Inafafanua uwezo wa kipengee kinachobadilika kukua ikiwa ni lazima. Inakubali thamani isiyo na umoja ambayo hutumika kama uwiano.
flex-shrink Inafafanua uwezo wa kipengee cha kubadilika kupungua ikiwa ni lazima.
flex-basis Inafafanua saizi ya awali ya kipengee kinachobadilika kabla ya nafasi yoyote inayopatikana kusambazwa kulingana na mambo ya kubadilika.
align-self Inaruhusu mpangilio chaguo-msingi (au ule ulioainishwa naalign-items) kubatilishwa kwa vitu vya kibinafsi vinavyobadilika.

Related Tools

Unda Mipangilio Kamili ya Flexbox

Taswira, kubinafsisha, na kutoa msimbo wa CSS flexbox kwa kiolesura chetu angavu cha kuburuta na kudondosha.

Stylus kwa Kigeuzi cha CSS

Badilisha msimbo wako wa SCSS kuwa CSS. Haraka, rahisi, na salama.

Kigeuzi cha SCSS hadi CSS

Badilisha msimbo wako wa SCSS kuwa CSS. Haraka, rahisi, na salama.

CMYK hadi HEX

Badilisha maadili ya rangi ya CMYK kuwa misimbo ya HEX kwa muundo wa wavuti na programu za dijiti

CMYK hadi PANTONE

Badilisha maadili ya rangi ya CMYK kuwa sawa na Pantone® kwa muundo wa uchapishaji

Shake-128 Kikokotoo cha Hash

Tengeneza heshi za Shake-128 haraka na kwa urahisi