Source

Flex

Hallitse nopeasti ruudukon sarakkeiden asettelua, kohdistusta ja kokoa, navigointia, komponentteja ja paljon muuta kattavalla valikoimalla responsiivisia flexbox-apuohjelmia. Monimutkaisemmissa toteutuksissa voi olla tarpeen mukautettu CSS.

Ota joustava käyttäytyminen käyttöön

Käytä displayapuohjelmia luodaksesi flexbox-säiliön ja muuntaaksesi suorat lapsielementit joustaviksi kohteiksi. Flex-säiliöitä ja -tuotteita voidaan muokata edelleen lisäjousto-ominaisuuksilla.

Olen flexbox-kontti!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Olen inline flexbox -kontti!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Responsiivisia muunnelmia on myös .d-flexja .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Suunta

Aseta taipuvien esineiden suunta flex-säiliössä, jossa on suuntaapuohjelmat. Useimmissa tapauksissa voit jättää vaakasuuntaisen luokan pois täältä, koska selaimen oletusarvo on row. Saatat kuitenkin kohdata tilanteita, joissa tämä arvo on asetettava erikseen (kuten reagoivat asettelut).

Käytä .flex-rowasettaaksesi vaakasuunnan (selaimen oletus) tai .flex-row-reversealoittaaksesi vaakasuunnan vastakkaisesta puolelta.

Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Käytä .flex-columnpystysuunnan asettamiseen tai .flex-column-reversepystysuunnan aloittamiseen vastakkaiselta puolelta.

Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Responsiivisia muunnelmia on myös flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Perustele sisältö

Käytä justify-contentflexbox-säiliöiden apuohjelmia muuttaaksesi pääakselin joustavien kohteiden kohdistusta (x-akseli aloittaa, y-akseli, jos flex-direction: column). Valitse start(selaimen oletusarvo), end, center, between, tai around.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Responsiivisia muunnelmia on myös justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Kohdista kohteet

Käytä align-itemsflexbox-säiliöiden apuohjelmia muuttaaksesi taipuvien kohteiden kohdistusta poikkiakselilla (alkuun y-akselilla, jos akselilla on flex-direction: column). Valitse start, end, center, baselinetai stretch(selaimen oletusarvo).

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Responsiivisia muunnelmia on myös align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Kohdista itsesi

Käytä align-selfflexbox-kohteiden apuohjelmia muuttaaksesi yksilöllisesti niiden kohdistusta poikkiakselilla (y-akseli aloittaa, x-akseli, jos flex-direction: column). Valitse samoista vaihtoehdoista kuin align-items, start, end, centertai baseline( stretchselaimen oletusarvo).

Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Responsiivisia muunnelmia on myös align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Täyttää

Käytä .flex-fillluokkaa sisarelementtien sarjassa pakottaaksesi ne yhtä leveiksi ja vievät kaiken käytettävissä olevan vaakatilan. Erityisen hyödyllinen tasaleveässä tai tasaisessa navigoinnissa.

Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Responsiivisia muunnelmia on myös flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Kasvaa ja kutistua

Käytä .flex-grow-*apuohjelmia vaihtaaksesi joustavan tuotteen kykyä kasvaa täyttämään käytettävissä oleva tila. Alla olevassa esimerkissä .flex-grow-1elementit käyttävät kaiken käytettävissä olevan tilan, mutta jättävät kahdelle muulle joustoelementille tarvittavan tilan.

Flex-tuote
Flex-tuote
Kolmas flex-tuote
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Käytä .flex-shrink-*apuohjelmia vaihtaaksesi joustavan tuotteen kykyä kutistua tarvittaessa. Alla olevassa esimerkissä toinen joustokohde .flex-shrink-1pakotetaan rivittämään sisältönsä uudelle riville "kutistuen", jotta edelliselle joustokohdalle jää enemmän tilaa .w-100.

Flex-tuote
Flex-tuote
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Responsiivisia muunnelmia on myös flex-growja flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1

Automaattiset marginaalit

Flexbox voi tehdä melko mahtavia asioita, kun yhdistät joustavat kohdistukset automaattisiin marginaaleihin. Alla on kolme esimerkkiä joustavien kohteiden ohjaamisesta automaattisten marginaalien avulla: oletus (ei automaattista marginaalia), kahden kohteen työntäminen oikealle ( .mr-auto) ja kahden kohteen työntäminen vasemmalle ( .ml-auto).

Valitettavasti IE10 ja IE11 eivät tue oikein automaattisia marginaaleja flex-tuotteissa, joiden ylätason arvo on muu kuin oletusarvo justify-content. Katso tästä StackOverflow-vastauksesta lisätietoja.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

Kohdistuskohdilla

Siirrä yksi joustava kohde pystysuunnassa säiliön ylä- tai alaosaan sekoittamalla align-items, flex-direction: columnja margin-top: autotai margin-bottom: auto.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Kääri

Muuta, miten joustavat tuotteet kääritään joustavaan säiliöön. Valitse ei rivitystä ollenkaan (selaimen oletus) .flex-nowrap-merkillä, kääriminen -merkillä .flex-wraptai käänteinen rivitys -merkillä .flex-wrap-reverse.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex flex-nowrap">
  ...
</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex flex-wrap">
  ...
</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsiivisia muunnelmia on myös flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Tilaus

Muuta tiettyjen joustotuotteiden visuaalista järjestystä muutamalla orderapuohjelmalla. Tarjoamme vain vaihtoehtoja tehdä nimike ensimmäiseksi tai viimeiseksi, sekä palauttaa DOM-tilauksen käyttöön. Kuten ordermikä tahansa kokonaislukuarvo (esim. 5), lisää mukautettu CSS tarvittaville lisäarvoille.

Ensimmäinen joustava tuote
Toinen joustava tuote
Kolmas flex-tuote
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Responsiivisia muunnelmia on myös order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Tasaa sisältö

Käytä align-contentflexbox-säiliöiden apuohjelmia kohdistaaksesi flex-kohteet yhteen poikkiakselilla . Valitse start(selaimen oletusarvo), end, center, between, around, tai stretch. Näiden apuohjelmien esittelemiseksi olemme ottaneet flex-wrap: wrapkäyttöön ja lisänneet joustavien tuotteiden määrää.

Varoitus! Tällä ominaisuudella ei ole vaikutusta yksittäisiin taipuisiin tuotteisiin.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-end flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-center flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-between flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-around flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsiivisia muunnelmia on myös align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch