Source

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.

Gaitu malgu-jokabideak

Aplikatu displayutilitateak flexbox edukiontzi bat sortzeko eta zuzeneko haurren elementuak elementu flex bihurtzeko. Flex ontziak eta elementuak gehiago alda daitezke flex propietate gehigarriekin.

Flexbox edukiontzi bat naiz!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Inline flexbox edukiontzi bat naiz!
<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

Norabidea

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.

Flexitutako elementua 1
Elementu flexioa 2
Elementua flexua 3
Flexitutako elementua 1
Elementu flexioa 2
Elementua flexua 3
<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.

Flexitutako elementua 1
Elementu flexioa 2
Elementua flexua 3
Flexitutako elementua 1
Elementu flexioa 2
Elementua flexua 3
<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

Edukia justifikatu

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.

Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<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

Lerrokatu elementuak

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).

Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<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

Lerrokatu norbere burua

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).

Flex elementua
Lerrokatuta dagoen elementu flexua
Flex elementua
Flex elementua
Lerrokatuta dagoen elementu flexua
Flex elementua
Flex elementua
Lerrokatuta dagoen elementu flexua
Flex elementua
Flex elementua
Lerrokatuta dagoen elementu flexua
Flex elementua
Flex elementua
Lerrokatuta dagoen elementu flexua
Flex elementua
<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

Bete

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.

Flex elementua
Flex elementua
Flex elementua
<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

Hazi eta txikitu

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.

Flex elementua
Flex elementua
Hirugarren elementu flexua
<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.

Flex elementua
Flex elementua
<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

Marjin automatikoak

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.

Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<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>

Lerrokatu-elementuekin

Eraman elementu flexu bat bertikalki edukiontzi baten goiko edo beheko aldera align-items, flex-direction: column, eta margin-top: autoedo nahastuz margin-bottom: auto.

Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<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>

Itzulbiratu

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.

Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<div class="d-flex flex-nowrap">
  ...
</div>
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<div class="d-flex flex-wrap">
  ...
</div>
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<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

Agindu

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.

Lehenengo elementu flexua
Bigarren elementu flexua
Hirugarren elementu flexua
<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

Lerrokatu edukia

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.

Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<div class="d-flex align-content-end flex-wrap">...</div>
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<div class="d-flex align-content-center flex-wrap">...</div>
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<div class="d-flex align-content-between flex-wrap">...</div>
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<div class="d-flex align-content-around flex-wrap">...</div>
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
Flex elementua
<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