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.

<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

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 zenuten egoerak aurkitzea (diseinu erantzuleak adibidez).

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

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, betweenedo 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

Lerrokatu elementuak

Erabili align-itemsflexbox-eko edukiontzietako erabilgarritasunak gurutze-ardatzean (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

Lerrokatu norbere burua

Erabili align-selfutilitateak flexbox elementuetan beren lerrokadura 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

Bete

Erabili .flex-fillklasea anai-arreba-elementu batzuen gainean, edukiaren berdineko zabaleretara (edo zabalera berdinetan edukiak bere ertz-koadroak gainditzen ez baditu) erabilgarri dagoen espazio horizontal guztia hartzen duen bitartean.

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</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.

<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

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.

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

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

<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

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.

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

<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