Flexbox: centrer horisontalt og vertikalt

Jeg tror, du ønsker noget i retning af følgende.

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>

Se demo på: http://jsfiddle.net/audetwebdesign/tFscL/

Dine .flex-item-elementer skal være på blokniveau (div i stedet for span), hvis du vil have højde og top/bottom padding til at fungere korrekt.

På .row skal du også indstille bredden til auto i stedet for 100%.

Dine .flex-container-egenskaber er fine.

Hvis du ønsker, at .row skal være centreret lodret i visningsporten, skal du tildele 100% højde til html og body, og du skal også fjerne body-marginerne.

Bemærk, at .flex-container har brug for en højde for at se effekten af den vertikale justering, ellers beregner containeren den mindste højde, der er nødvendig for at omslutte indholdet, hvilket er mindre end visningsportens højde i dette eksempel.

Fodnote: Egenskaberne flex-flow, flex-direction og flex-wrap kunne have gjort dette design lettere at implementere. Jeg mener ikke, at .row-containeren er nødvendig, medmindre du ønsker at tilføje noget styling omkring elementerne (baggrundsbillede, rammer osv.).

En nyttig ressource er: http://demo.agektmr.com/flexbox/

Sådan centrerer du elementer lodret og vandret i Flexbox

Nedenfor er to generelle centreringsløsninger.

Den ene for vertikalt justerede flexelementer (flex-direction: column) og den anden for horisontalt justerede flexelementer (flex-direction: row).

I begge tilfælde kan højden af de centrerede div'er være variabel, udefineret, ukendt, ukendt, hvad som helst. Højden af de centrerede divs er ligegyldig.

Her er HTML'en for begge:

<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 (undtagen dekorative stilarter)

• Når flex-elementer stables lodret:*

#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 */
}

[]]2

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

Når flexartikler er stablet vandret:

Tilpas reglen flex-direction fra ovenstående kode.

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

[]]3

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

Centrering af indholdet af flexelementerne

Anvendelsesområdet for en [flex formateringskontekst] (https://www.w3.org/TR/css-flexbox-1/#flex-containers) er begrænset til et forælder-barn-forhold. Efterkommere af en flexcontainer ud over børnene deltager ikke i flexlayout og ignorerer flexegenskaber. Flex-egenskaber kan ikke arves efter børn.

Derfor skal du altid anvende display: flex eller display: inline-flex på et overordnet element for at anvende flexegenskaber på barnet.

Hvis du vil centrere tekst eller andet indhold i et flexelement vertikalt og/eller horisontalt, skal du gøre elementet til en (indlejret) flexcontainer og gentage centreringreglerne.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Flere detaljer her: https://stackoverflow.com/q/25311541/3597276

Alternativt kan du anvende margin: auto på indholdselementet i flexelementet.

p { margin: auto; }

Få mere at vide om flex auto-marginer her: [Metoder til justering af Flex-elementer] (https://stackoverflow.com/a/33856609/3597276) (se boks nr. 56).

Centrering af flere linjer af flexelementer

Når en flexcontainer har flere linjer (på grund af ombrydning), er egenskaben align-content nødvendig for justering på tværs af akserne.

Fra specifikationerne:

[8.4. Pakning af Flex-linjer: align-content property]] (https://www.w3.org/TR/css-flexbox-1/#align-content-property)

Egenskaben align-content justerer en flexcontainers linjer inden for den flexcontainer, når der er ekstra plads i tværaksen, svarende til hvordan justify-content justerer individuelle elementer inden for hovedaksen. Bemærk, at denne egenskab ikke har nogen effekt på en flexcontainer med én linje.

Flere detaljer her: https://stackoverflow.com/q/42613359/3597276

Browserunderstøttelse

Flexbox understøttes af alle større browsere [undtagen IE < 10] (http://caniuse.com/#search=flex). Nogle nyere browserversioner, såsom Safari 8 og IE10, kræver leverandørpræfikser. For en hurtig måde at tilføje præfikser på er det muligt at bruge Autoprefixer. Flere oplysninger i dette svar.

Centreringsløsning for ældre browsere

For en alternativ centreringsløsning ved hjælp af CSS-tabeller og positioneringsegenskaber se dette svar: https://stackoverflow.com/a/31977476/3597276

Glem ikke at bruge vigtige browserspecifikke attributter:

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

Du kan læse disse to links for bedre at forstå flex: http://css-tricks.com/almanac/properties/j/justify-content/ og http://ptb2.me/flexbox/

Held og lykke.