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ä display
apuohjelmia luodaksesi flexbox-säiliön ja muuntaaksesi suorat lapsielementit joustaviksi kohteiksi. Flex-säiliöitä ja -tuotteita voidaan muokata edelleen lisäjousto-ominaisuuksilla.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Responsiivisia muunnelmia on myös .d-flex
ja .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-row
asettaaksesi vaakasuunnan (selaimen oletusarvo) tai .flex-row-reverse
aloittaaksesi vaakasuunnan vastakkaisesta puolelta.
<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-column
pystysuunnan asettamiseen tai .flex-column-reverse
pystysuunnan aloittamiseen vastakkaiselta puolelta.
<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-content
flexbox-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
.
<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-items
flexbox-säiliöiden apuohjelmia muuttaaksesi taipuvien kohteiden kohdistusta poikkiakselilla (alkuun y-akselilla, jos akselilla on flex-direction: column
). Valitse start
, end
, center
, baseline
tai stretch
(selaimen oletusarvo).
<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-self
flexbox-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
, center
tai baseline
( stretch
selaimen oletusarvo).
<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-fill
luokkaa sisarelementtien sarjassa pakottaaksesi ne leveyteen, joka on yhtä suuri kuin niiden sisältö (tai yhtä leveyteen, jos niiden sisältö ei ylitä niiden reunusruutuja) samalla kun ne vievät kaiken käytettävissä olevan vaakatilan.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</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-1
elementit käyttävät kaiken käytettävissä olevan tilan, mutta jättävät kahdelle muulle joustoelementille tarvittavan tilan.
<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-1
pakotetaan käärimään sisältönsä uudelle riville "kutistuen", jotta edelliselle joustokohdalle jää enemmän tilaa .w-100
.
<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-grow
ja 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.
<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: column
ja margin-top: auto
tai margin-bottom: auto
.
<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-wrap
tai käänteinen rivitys -merkillä .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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 order
apuohjelmalla. Tarjoamme vain vaihtoehtoja tehdä nimike ensimmäiseksi tai viimeiseksi, sekä palauttaa DOM-tilauksen käyttöön. Kuten order
mikä tahansa kokonaislukuarvo (esim. 5
), lisää mukautettu CSS tarvittaville lisäarvoille.
<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-content
flexbox-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: wrap
käyttöön ja lisänneet joustavien tuotteiden määrää.
Varoitus! Tällä ominaisuudella ei ole vaikutusta yksittäisiin taipuisiin tuotteisiin.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch