Kā centrēt div horizontāli un vertikāli konteinerā, izmantojot flexbox. Tālāk dotajā piemērā es gribu, lai katrs skaitlis būtu zem otra (rindās), kas ir centrēti horizontāli.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Es domāju, ka jums ir nepieciešams kaut kas līdzīgs šādam.
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
Skatiet demo:
Jūsu .flex-item
elementiem jābūt bloka līmeņa (div
, nevis span
), ja vēlaties, lai augstums un augšējā/apakšējā izvietojums darbotos pareizi.
Turklāt .row
iestatiet platumu automātiski
, nevis 100%
.
Jūsu .flex-container
īpašības ir kārtībā.
Ja vēlaties, lai .rinda
būtu vertikāli centrēta skata portā, piešķiriet html
un body
100% augstumu un arī body
apmales no nulles.
Ņemiet vērā, ka .flex-container
ir nepieciešams augstums, lai redzētu vertikālās izlīdzināšanas efektu, pretējā gadījumā konteiners aprēķina minimālo augstumu, kas nepieciešams, lai ietvertu saturu, kas šajā piemērā ir mazāks par skata porta augstumu.
Piezīme:
Šo konstrukciju būtu bijis vieglāk īstenot ar flex-flow
, flex-direction
, flex-wrap
īpašībām. Manuprāt, konteiners .row
nav nepieciešams, ja vien nevēlaties elementiem pievienot kādu stilu (fona attēlu, apmales utt.).
Noderīgs resurss ir: http://demo.agektmr.com/flexbox/
Zemāk ir divi vispārīgi centrēšanas risinājumi.
Viens vertikāli izlīdzinātiem elastīgajiem elementiem (flex-direction: column
) un otrs horizontāli izlīdzinātiem elastīgajiem elementiem (flex-direction: row
).
Abos gadījumos centrēto divs var būt mainīgs, nenoteikts, nezināms vai kāds cits. Centrēto divs augstumam nav nozīmes.
Turpmāk ir HTML abiem gadījumiem:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (izņemot dekoratīvos stilus)
Kad flex elementi ir sakrauti vertikāli:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
[DEMO](
)Ja elastīgie elementi ir sakrauti horizontāli:
Pielāgojiet flex-direction
noteikumu no iepriekš minētā koda.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
[DEMO](
3/)flex formatēšanas konteksta darbības joma ir ierobežota līdz vecāku un bērnu attiecībām. Flex konteinera pēcnācēji ārpus bērniem nepiedalās flex izkārtojumā un ignorē flex īpašības. Būtībā flex īpašības nav pārmantojamas ārpus bērniem.
Tādējādi, lai piemērotu elastīgās īpašības atvasinātajam elementam, vienmēr jāpiemēro display: flex
vai display: inline-flex
vecākam elementam.
Lai vertikāli un/vai horizontāli centrētu tekstu vai citu saturu, kas ietverts elastīgā elementā, izveidojiet elementu par (ieliktu) elastīgu konteineru un atkārtojiet centrēšanas noteikumus.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Sīkāka informācija šeit: https://stackoverflow.com/q/25311541/3597276
Kā alternatīvu var piemērot margin: auto
elastīgā elementa satura elementam.
p { margin: auto; }
Uzziniet vairāk par flex auto
margām šeit: Flex elementu izlīdzināšanas metodes (skat. lodziņu#56).
Ja flex konteineram ir vairākas rindas (ietīšanas dēļ), īpašība align-content
ir nepieciešama, lai veiktu izlīdzināšanu starp asīm.
8.4. Flex rindu iepakošana:
align-content
īpašībaĪpašība
align-content
izlīdzina flex konteinera rindas iekšpusē. flex konteinera, ja ir papildu vieta šķērsvirzienā, līdzīgi kā tas ir ar kājustify-content
izlīdzina atsevišķus elementus galvenajā asī. *Piezīme, šai īpašībai nav ietekmes uz vienrindu flekskonteineri.
Sīkāka informācija šeit: https://stackoverflow.com/q/42613359/3597276
Flexbox atbalsta visas galvenās pārlūkprogrammas izņemot IE <10. Dažām jaunākajām pārlūkprogrammu versijām, piemēram, Safari 8 un IE10, ir nepieciešami ražotāja prefiksi. Lai ātri pievienotu prefiksus, izmantojiet Autoprefiksators. Sīkāka informācija šajā atbildē.
Alternatīvu centrēšanas risinājumu, izmantojot CSS tabulas un pozicionēšanas īpašības, skatīt šajā atbildē: https://stackoverflow.com/a/31977476/3597276.
Neaizmirstiet izmantot svarīgus pārlūkprogrammām raksturīgus atribūtus:
izlīdzināt-items: center; -->
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center; -->
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
Jūs varētu izlasīt šīs divas saites, lai labāk izprastu flex: http://css-tricks.com/almanac/properties/j/justify-content/ un http://ptb2.me/flexbox/
Veiksmi.