Flex
Hafðu fljótt umsjón með skipulagi, röðun og stærð ristardálka, siglinga, íhluta og fleira með fullri föruneyti af móttækilegum flexbox tólum. Fyrir flóknari útfærslur gæti sérsniðið CSS verið nauðsynlegt.
Notaðu display
tól til að búa til flexbox-ílát og umbreyttu beinum börnum í flex-hluti. Hægt er að breyta sveigjanlegum ílátum og hlutum frekar með viðbótar sveigjanlegum eiginleikum.
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
Móttækileg afbrigði eru einnig til fyrir .d-flex
og .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
Stilltu stefnu sveigjanlegra hluta í sveigjanlegu íláti með stefnubúnaði. Í flestum tilfellum geturðu sleppt láréttum flokki hér þar sem sjálfgefið vafra er row
. Hins vegar gætirðu lent í aðstæðum þar sem þú þurftir að stilla þetta gildi sérstaklega (eins og móttækileg skipulag).
Notaðu .flex-row
til að stilla lárétta stefnu (sjálfgefið vafra), eða .flex-row-reverse
til að hefja lárétta stefnu frá gagnstæðri hlið.
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
Notaðu .flex-column
til að stilla lóðrétta stefnu eða .flex-column-reverse
til að hefja lóðrétta stefnu frá gagnstæðri hlið.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
Móttækileg afbrigði eru einnig til fyrir 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
Notaðu justify-content
tól á flexbox-ílátum til að breyta röðun sveigjanlegra hluta á aðalásnum (x-ás til að byrja, y-ás ef flex-direction: column
). Veldu úr start
(sjálfgefið vafra), end
, center
, between
, eða around
.
Móttækileg afbrigði eru einnig til fyrir 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
Notaðu align-items
tól á flexbox-ílátum til að breyta röðun sveigjanlegra hluta á þverásnum (y-ás til að byrja, x-ás ef flex-direction: column
). Veldu úr start
, end
, center
, baseline
, eða stretch
(sjálfgefið vafra).
Móttækileg afbrigði eru einnig til fyrir 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
Notaðu align-self
tól á flexbox-hlutum til að breyta röðun þeirra á þverásnum hver fyrir sig (y-ásinn til að byrja, x-ásinn ef flex-direction: column
). Veldu úr sömu valmöguleikum og align-items
: start
, end
, center
, baseline
, eða stretch
(sjálfgefið vafra).
Móttækileg afbrigði eru einnig til fyrir 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
Flexbox getur gert ansi ógnvekjandi hluti þegar þú blandar sveigjanlegu línum saman við sjálfvirka spássíu. Sýnd hér að neðan eru þrjú dæmi um að stjórna sveigjanlegum hlutum með sjálfvirkum spássíur: sjálfgefið (engin sjálfvirk spássía), ýta tveimur atriðum til hægri ( .mr-auto
) og ýta tveimur atriðum til vinstri ( .ml-auto
).
Því miður styðja IE10 og IE11 ekki almennilega sjálfvirka framlegð á sveigjanlegum hlutum þar sem foreldri hefur ekki sjálfgefið justify-content
gildi. Sjá þetta StackOverflow svar fyrir frekari upplýsingar.
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
Færðu einn sveigjanlegan hlut lóðrétt efst eða neðst á ílát með því að blanda align-items
, flex-direction: column
, og margin-top: auto
eða margin-bottom: auto
.
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>
Breyttu því hvernig sveigjanlegir hlutir pakka inn í sveigjanlega ílát. Veldu á milli alls engin umbúðir (sjálfgefið vafra) með .flex-nowrap
, umbúðir með .flex-wrap
eða öfugri umbúðir með .flex-wrap-reverse
.
Móttækileg afbrigði eru einnig til fyrir 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
Breyttu sjónrænni röð tiltekinna sveigjanlegra hluta með handfylli af order
tólum. Við bjóðum aðeins upp á valkosti til að gera hlut fyrst eða síðast, svo og endurstillingu til að nota DOM pöntunina. Eins og order
tekur hvaða heiltölugildi sem er (td, 5
), bættu við sérsniðnum CSS fyrir öll viðbótargildi sem þarf.
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div>
Móttækileg afbrigði eru einnig til fyrir 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
Notaðu align-content
tól á flexbox ílátum til að stilla sveigjanlegum hlutum saman á þverásnum. Veldu úr start
(sjálfgefið vafra), end
, center
, between
, around
, eða stretch
. Til að sýna fram á þessi tól höfum við framfylgt flex-wrap: wrap
og fjölgað sveigjanlegum hlutum.
Höfuð upp! Þessi eiginleiki hefur engin áhrif á stakar raðir af sveigjanlegum hlutum.
Móttækileg afbrigði eru einnig til fyrir 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