Je, ninahamishaje div katikati kwa kutumia flexbox na zana hii?

Chagua mpangilio tayari wa Iliyocentrika vizuri, unaoweka justify-content: center na align-items: center kwenye kontena. Kisha bonyeza Nakili CSS na ubandike kwenye laha yako ya mtindo.

Je, ni sifa gani za flexbox ninaweza kubadilisha?

Unaweza kuweka flex-direction, flex-wrap, justify-content, align-items, align-content na Pengo. Unaweza pia kubadilisha idadi ya Vitu kutoka 1 hadi 10 na Urefu wa muonyaji.

Je, ninaonaje jinsi flex-grow inavyofanya kazi kwenye kitu kimoja?

Bofya kitu kwenye muonyaji wa moja kwa moja ili kuwasha flex-grow: 1 juu yake, na ubofye tena ili kuiondoa. CSS iliyozalishwa kisha inajumuisha sheria ya .item:nth-child kwa kitu hicho.

Je, kuna mipangilio tayari ya kuanzia, kama vile upau wa urambazaji au safu ya kadi?

Ndiyo. Maajabu ni Upau wa urambazaji, Iliyocentrika vizuri, Mpango wa upau wa kando na Safu ya kadi inayozunguka. Kila moja inapakia seti ya thamani unazoweza kurekebisha baadaye.

Kwa nini align-content inaonekana kutofanya chochote kwenye muonyaji?

align-content inaanza kutumika tu wakati vitu vinapozunguka kwenye mistari kadhaa. Kwenye muonyaji inatumika tu wakati wrap si nowrap, kwa hivyo weka flex-wrap kuwa wrap kwanza.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

↔️

Kitengenezea CSS Flexbox bila malipo

Jaribu mwelekeo wa kubana, songa, na justifikasi kwenye vitu vya moja kwa moja — na kunakili CSS.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Inafanya kazi bila mtandao mara ikishapakia

Uwanja wa kubana wa mwonekano: seta mwelekeo, songa, justify-content, align-items na pengo, badilisha idadi ya vitu, na bofya kitu ili kuipa flex-grow. CSS inabadilika kwa moja kwa moja, tayari kunakili.

Maajabu

flex-direction

flex-wrap

justify-content

align-items

Pengo: 12pxVitu: 4Urefu wa muonyaji: 176px

Kidokezo: bofya kitu katika muonyaji ili kubadili flex-grow: 1 juu yake.

Muonyaji wa moja kwa moja

css

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

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Kila kitu kinaendelea katika kivinjari chako — hakina kinachoupakiwa.

Jinsi Inavyofanya Kazi

Uwanja wa michezo wa flexbox unaoingiliana: badilisha flex-direction, wrap, justify-content na align-items na uangalie hadi vitu 10 vya moja kwa moja vikipangwa upya papo hapo. Bofya kitu chochote kukipa flex-grow: 1 na uone jinsi kinavyodai nafasi. CSS inasasishwa moja kwa moja, tayari kunakiliwa kwenye mradi wako.

1
Panga chombo
Mwelekeo, wrap, justify-content, align-items, pengo.
2
Ongeza vitu
Vitu vya flex vimoja hadi kumi vilivyohesabiwa.
3
Jaribu
Bofya kitu kuwasha/zima flex-grow na uone athari.
4
Nakili CSS
Sheria za chombo (na kitu), tayari kubandika.

Kila kitu kinafanya kazi kwenye kivinjari chako — hakuna kinachopakiwa.

Zana Zinazohusiana

🟦

Kitengenezea CSS Grid

Zungu CSS grid — tracks, vitengo na pengo — na kunakili CSS na HTML iliyozalishwa.

Jaribu

🌈

Jenereta ya Mwelekeo wa CSS

Unda mwelekeo wa CSS wa mstari, radiali, na mviringo na mwonekano wa moja kwa moja. Nakili CSS kwa kubonyeza mara moja.

Jaribu

🎨

Jenereta ya Kivuli cha Sanduku la CSS

Mjenzi wa kuona kwa box-shadow ya CSS na mwonekano wa moja kwa moja, mrundikano wa tabaka nyingi, kichaguo cha rangi, kubadilisha inset, na kunakili kwa kubonyeza mara moja. Inajumuisha violezo vya Material, neumorphism, na mwanga.

Jaribu

Kitengenezea CSS Flexbox bila malipo

Jinsi Inavyofanya Kazi

Zana Zinazohusiana

Kitengenezea CSS Grid

Jenereta ya Mwelekeo wa CSS

Jenereta ya Kivuli cha Sanduku la CSS

Maswali Yanayoulizwa Mara Kwa Mara