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.
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.
<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-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
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.
<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.
<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
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.
<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
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).
<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
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).
<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
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.
<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
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.
<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.
<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
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>Siirrä yksi joustava kohde pystysuunnassa säiliön ylä- tai alaosaan sekoittamalla align-items, flex-direction: columnja margin-top: autotai 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>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.
<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
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.
<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
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.
<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-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