Uwanja wa Flexbox

Zana zote

Jaribu sifa za CSS Flexbox kwenye vipengele halisi na nakili CSS ya mpangilio iliyotengenezwa.

Onyesho la awali Bofya kipengele ili kukihariri
CSS iliyotengenezwa
—

Kila kitu hufanyika ndani ya kivinjari chako — hakuna kinachopakiwa.

Kontena
12px
Vipengele
0
Kipengele kilichochaguliwa

Kuhusu Uwanja wa Flexbox

Flexbox Playground ni sanduku la majaribio la vitendo kwa ajili ya CSS flexbox. Weka sifa za kontena — flex-direction, flex-wrap, justify-content, align-items, align-content na gap — kisha uangalie hadi vitu 12 vikibadilika mpangilio papo hapo kwenye onyesho la awali unapobadilisha kila thamani. Ni njia ya haraka zaidi ya kuelewa kinachofanywa na kila sifa.

Vitu vinaweza kuhaririwa mmoja mmoja: bofya kimoja ili kukichagua kisha urekebishe flex-grow, flex-shrink, flex-basis, align-self na order yake. Kuona kipengele kimoja kikikua na kumeza nafasi huru huku vipengele jirani vikibaki na upana wake kunafundisha mfumo wa ukubwa wa flex haraka kuliko mchoro wowote.

Playground hutengeneza CSS safi kwa ajili ya kontena na vitu vyovyote vyenye mipangilio isiyo ya kawaida — nakili moja kwa moja kwenye stylesheet yako. Kila kitu kinafanyika kwenye kivinjari chako bila kupakia chochote, na kitufe cha kuweka upya kinakurudisha kwenye hali safi.

Jinsi ya kutumia Uwanja wa Flexbox

  1. Weka flex-direction ya kontena, wrap, justify-content, align-items, align-content na gap.
  2. Ongeza au ondoa vitu — kati ya 2 na 12 — ili kuiga kipengele chako halisi.
  3. Bofya kipengele kisha rekebisha grow, shrink, basis, align-self na order yake.
  4. Angalia onyesho la awali likibadilika papo hapo kwa kila badiliko.
  5. Nakili CSS iliyotengenezwa na uibandike kwenye mradi wako.

Maswali yanayoulizwa mara kwa mara

flex-grow husambaza nafasi iliyobaki: kipengele chenye grow 2 hupokea mara mbili ya nafasi ya ziada kuliko chenye grow 1. flex-shrink hufanya kazi kinyume wakati nafasi ni chache. Zote mbili ni uwiano kati ya vipengele jirani, si vipimo kamili.

align-items huweka nafasi ya vitu kwenye mhimili tofauti ndani ya mstari wake. align-content hupanga nafasi kati ya mistari mingi iliyokunjwa ndani ya kontena — ina athari inayoonekana pale tu flex-wrap inapotengeneza mistari zaidi ya mmoja.

Kila kipengele cha flex huwa na order 0 kwa kawaida; vipengele hupangwa kutoka order ndogo zaidi hadi kubwa zaidi. Kubadilisha order ya kipengele huhamisha muonekano wake bila kugusa HTML — mfuatano wa DOM, na hivyo utaratibu unaosomwa na screen reader, hubaki vilevile.

Ndiyo. CSS inayotengenezwa hujumuisha kanuni za kontena pamoja na kichagua kwa kila kipengele ambacho grow, shrink, basis, align-self au order yake ni tofauti na ile ya kawaida, ili uweze kubandika mpangilio kamili unaofanya kazi.

Ndiyo — ni bure, hauhitaji kujisajili, na hufanya kazi kabisa upande wa kivinjari. Majaribio yako hayatoki kwenye tabo la kivinjari.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Kizalishi cha CSS Box Shadow Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo. Bila Malipo
Jenereta ya CSS Border Radius Tengeneza CSS border-radius kwa macho ukiwa na onyesho la moja kwa moja na nakili msimbo tayari kwa matumizi. Bila Malipo
Utafutaji maarufu
uwanja wa flexbox jenereta ya css flexbox jenereta ya flex container zana ya justify-content align-items jenereta ya mpangilio wa css flex kionyeshi cha flexbox jenereta ya msimbo wa flexbox
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.