Flex
Kudeatu azkar sareko zutabeen, nabigazioaren, osagaien eta besteren diseinua, lerrokatzea eta dimentsioa flexbox erreaktiboen multzo oso batekin. Inplementazio konplexuagoetarako, CSS pertsonalizatua beharrezkoa izan daiteke.
Aplikatu displayutilitateak flexbox edukiontzi bat sortzeko eta zuzeneko haurren elementuak elementu flex bihurtzeko. Flex ontziak eta elementuak gehiago alda daitezke flex propietate gehigarriekin.
<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>.d-flexAldaera sentikorrak eta -rentzat ere badaude .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
Ezarri elementu malgutuen norabidea norabide utilitateekin flexu-edukiontzi batean. Kasu gehienetan, klase horizontala ezaba dezakezu hemen arakatzailearen lehenetsia baita row. Hala ere, baliteke balio hori esplizituki ezarri behar zenuen egoerak topa ditzakezu (diseinu erantzuleak esaterako).
Erabili .flex-rownorabide horizontala ezartzeko (arakatzailearen lehenetsia) edo .flex-row-reversenorabide horizontala kontrako aldean hasteko.
<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>Erabili .flex-columnnorabide bertikala ezartzeko edo .flex-column-reversenorabide bertikala kontrako aldetik hasteko.
<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>Aldaera sentikorrak ere badira 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
Erabili justify-contentflexbox-eko edukiontzietako erabilgarritasunak ardatz nagusiko elementu flexuen lerrokadura aldatzeko (hasteko x ardatza, y ardatza bada flex-direction: column). Aukeratu start(arakatzailearen lehenetsia), end, center, between, edo 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>Aldaera sentikorrak ere badira 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
Erabili align-itemsflexbox-eko edukiontzietako utilitateak gurutze-ardatzean flex elementuen lerrokadura aldatzeko (y-ardatza hasteko, x-ardatza bada flex-direction: column). Aukeratu start, end, center, baseline, edo stretch(arakatzailearen lehenetsia).
<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>Aldaera sentikorrak ere badira 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
Erabili align-selfutilitateak flexbox elementuetan beren lerrokatzea banan-banan aldatzeko gurutze-ardatzean (y-ardatza hasteko, x-ardatza bada flex-direction: column). Aukeratu aukera berdinen artean align-items: start, end, center, baseline, edo stretch(arakatzailearen lehenetsia).
<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>Aldaera sentikorrak ere badira 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
Erabili .flex-fillklasea elementu anai-arreba batzuen gainean zabalera berdinetara behartzeko, erabilgarri dagoen espazio horizontal guztia hartzen duen bitartean. Batez ere zabalera berdineko edo justifikatutako nabigaziorako erabilgarria.
<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>Aldaera sentikorrak ere badira flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
Erabili .flex-grow-*utilitateak elementu malgu baten hazteko gaitasuna aldatzeko, erabilgarri dagoen espazioa betetzeko. Beheko adibidean, .flex-grow-1elementuek ahal duten espazio guztia erabiltzen dute, gainontzeko bi elementu malgurei behar duten espazioa uzten dieten bitartean.
<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>Erabili .flex-shrink-*utilitateak elementu malgu baten gaitasuna txikitzeko behar izanez gero aldatzeko. Beheko adibidean, bigarren elementu .flex-shrink-1flexua bere edukia lerro berri batean biltzera behartuta dago, "txikituz" aurreko elementu flexuari leku gehiago uzteko .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>flex-growAldaera sentikorrak eta -rentzat ere badaude 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-ek gauza ikaragarriak egin ditzake malgu-lerroketak marjin automatikoekin nahasten dituzunean. Jarraian, elementu malguak marjin automatikoen bidez kontrolatzeko hiru adibide erakusten dira: lehenetsia (marjina automatikorik ez), bi elementu eskuinera .mr-autobultzatzea ( ) eta bi elementu ezkerrera bultzatzea ( .ml-auto).
Zoritxarrez, IE10 eta IE11-ek ez dute behar bezala onartzen marjina automatikoetan, gurasoek justify-contentbalio lehenetsia ez duten elementu malguetan. Ikusi StackOverflow erantzun hau xehetasun gehiago lortzeko.
<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>Eraman elementu flexu bat bertikalki edukiontzi baten goiko edo beheko aldera align-items, flex-direction: column, eta margin-top: autoedo nahastuz 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>Aldatu elementu malguak edukiontzi malgu batean nola biltzeko modua. Aukeratu batere ez biltzea (arakatzailearen lehenetsia) .flex-nowrap, itzulbiratu-rekin .flex-wrapedo alderantzikatu-rekin .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>Aldaera sentikorrak ere badira 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
Aldatu elementu malgu zehatzen ordena bisualaorder utilitate gutxi batzuekin. Elementu bat lehena edo azkena egiteko aukerak eskaintzen ditugu, baita DOM ordena erabiltzeko berrezartzea ere. Edozein balio oso hartzen duen moduan order(adibidez, 5), gehitu CSS pertsonalizatua behar diren balio gehigarrietarako.
<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>Aldaera sentikorrak ere badira 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
Erabili align-contentutilitateak flexbox ontzietan elementu flexuak elkarrekin lerrokatzeko gurutze-ardatzean. Aukeratu start(arakatzailearen lehenetsia), end, center, between, around, edo stretch. Utilitate horiek erakusteko, flex-wrap: wrapelementu malgutuen kopurua ezarri eta handitu dugu.
Buruak gora! Propietate honek ez du eraginik elementu malgutuen errenkada bakarrean.
<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>Aldaera sentikorrak ere badira 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