Flexbox: centrēšana horizontāli un vertikāli

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: http://jsfiddle.net/audetwebdesign/tFscL/

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/

Elementu centrēšana vertikāli un horizontāli Flexbox logrīkā

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

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <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 */
}

[![šeit ievadiet attēla aprakstu][2]][2]

[DEMO](http://jsfiddle.net/8o29y7pd/)

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;
}

[![šeit ievadiet attēla aprakstu][3]][3]

[DEMO](http://jsfiddle.net/8o29y7pd/3/)

Elastīgo elementu satura centrēšana

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

Vairāku rindu flex elementu centrēšana

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.

• No specifikācijas:*

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

Pārlūkprogrammas atbalsts

Flexbox atbalsta visas galvenās pārlūkprogrammas [izņemot IE

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.