Yakagadziriswa: sei kuisa flexbox

Chokwadi, heino kutarisa kwakadzama maitiro ekuisa Flexbox:

Flexbox, ipfupi yeFlexible Box Module, imodhi yekumisikidza muCSS3 inopa mhinduro yakapusa uye inodiwa pakugadzira zvimiro zvinopinduka zvinopindura pasina kushandisa zvinoyangarara kana kuisa.

Iyo inochinjika bhokisi module inonangana nedambudziko rimwechete rinoitwa neGrid Layout asi neimwe nzira, saka inogona kunge yakanakira purojekiti yako kana uri kubata neiyo-dimensional dhizaini.

Kuisa Flexbox

Kuti ushandise zvinoshamisa maficha eFlexbox, vanogadzira vanofanirwa kuisanganisa mucodebase yavo. Nekudaro, hapana kuisirwa kwese kunobatanidzwa sezvaungaita neraibhurari kana chimiro. Iyo Flexbox zvivakwa chikamu cheCSS, icho chakabatanidzwa mune ese emazuva ano mabhurawuza ewebhu.

Kuenzanisira, ini ndichanyora kodhi yemuenzaniso pano:

// HTML
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

// CSS
.flex-container {
  display: flex;
}

Mushure mekushandisa iyo 'chiratidziro: flex' chivakwa kune chigadziko chevabereki, vese vana vekare vanova zvinhu zvinochinjika.

Flexbox Properties

Kunzwisisa iyo Flexbox terminology uye zvivakwa kwakakosha kuti uishandise nemazvo mupurojekiti yako. Flexbox inosanganisira maviri seti ezvivakwa: iyo yemubereki mudziyo zvivakwa uye yemwana zvinhu zvivakwa.

Iyo yevabereki mudziyo zvivakwa zvinosanganisira:

  • kuratidza: flex kana inline-flex
  • flex-direction: row, row-reverse, column, column-reverse
  • justify-zvirimo: flex-start, flex-end, pakati, space-pakati, space-akapoteredza, space-yakaenzana

Zvinhu zvemwana zvinosanganisira:

  • urongwa
  • flex-kukura
  • flex-shrink
  • flex-basis
  • kuzvigadzirisa

Flexbox in Action

Zvino ngationei muenzaniso wakaoma ne Flexbox zvivakwa. Pano, zvinhu zvakarongedzerwa mumutsara wakarongeka, uye wakatambanudzwa kuzadza mudziyo wakatwasuka:

// HTML
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

// CSS
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
}

Ukangojaira kujairana nezvivakwa izvi, unozviwana flex box inoita akawanda akaoma marongerwo ari nyore kuita.

Kuongorora Flexbox Libraries

Nepo vanilla Flexbox ichipa mhinduro ine simba yemagadzirirwo emagadzirirwo, kune akawanda maraibhurari akadai Flexy Mabhokisi, CSS3 Flexbox Playground, uye Yakagadziriswa neFlexbox izvo zvinogona kukubatsira kunzwisisa uye kushandisa Flexbox zvakanyanya.

Mukupedzisa (kunyangwe ndisiri kumaka chikamu ichi zvakajeka), nekudzidza kushandisa Flexbox uye zvimiro zvayo zvinobudirira, vanogadzira vanogona kugadzira anochinja uye anochinjika nyore marongero anosangana nezviyero zvemazuva ano webhu dhizaini. Flexbox, ine nzvimbo yayo yekugovera uye kugona kwekugadzirisa, inopa zvechokwadi bhokisi rinochinjika kune ako madhizaini zvinodiwa.

Related posts:

Leave a Comment