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">I'm a flexbox container!</div><div class="d-inline-flex p-2">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">
<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>Erabili .flex-columnnorabide bertikala ezartzeko edo .flex-column-reversenorabide bertikala kontrako aldetik hasteko.
<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>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
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">
<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>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" 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>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">
<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>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