Hoe kan ik div horizontaal centreren, en verticaal binnen de container met behulp van flexbox. In onderstaand voorbeeld, wil ik elk nummer onder elkaar (in rijen), die horizontaal gecentreerd zijn.
.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>
Ik denk dat je iets als het volgende wilt.
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>
Zie demo op:
Je .flex-item
elementen moeten blok-niveau zijn (div
in plaats van span
) als je wilt dat de hoogte en top/bottom padding goed werken.
Zet ook de breedte van .row
op auto
in plaats van 100%
.
Je .flex-container
eigenschappen zijn in orde.
Als je de .row
verticaal gecentreerd wilt hebben in de view port, wijs dan 100% hoogte toe aan html
en body
, en zet ook de body
marges op nul.
Merk op dat .flex-container
een hoogte nodig heeft om het verticale uitlijningseffect te zien, anders berekent de container de minimale hoogte die nodig is om de inhoud te omsluiten, en dat is in dit voorbeeld minder dan de hoogte van de viewport.
Footnote:
De flex-flow
, flex-direction
, flex-wrap
eigenschappen hadden dit ontwerp eenvoudiger uitvoerbaar kunnen maken. Ik denk dat de .row
container niet nodig is, tenzij je wat styling rond de elementen wilt toevoegen (achtergrond afbeelding, randen enzovoort).
Een nuttige bron is: http://demo.agektmr.com/flexbox/
Hieronder staan twee algemene centreeroplossingen.
Een voor verticaal uitgelijnde flex-items (flex-direction: column
) en de andere voor horizontaal uitgelijnde flex-items (flex-direction: row
).
In beide gevallen kan de hoogte van de gecentreerde divs variabel zijn, ongedefinieerd, onbekend, wat dan ook. De hoogte van de gecentreerde divs doet er niet toe.
Hier's de HTML voor beide:
<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 (exclusief decoratieve stijlen)
Wanneer flex items verticaal gestapeld zijn:
#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](
)Wanneer flex items horizontaal gestapeld zijn:
Pas de flex-direction
regel aan uit de code hierboven.
#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;
}
![voer hier de beschrijving van de afbeelding in]
[DEMO](
3/)Het bereik van een flex opmaakcontext is beperkt tot een ouder-kind relatie. Afstammelingen van een flex container buiten de kinderen nemen niet deel aan flex opmaak en zullen flex eigenschappen negeren. In wezen zijn flex eigenschappen niet overerfbaar voorbij de kinderen.
U zult dus altijd display: flex
of display: inline-flex
op een parent element moeten toepassen om flex eigenschappen op het kind toe te passen.
Om tekst of andere inhoud in een flex item verticaal en/of horizontaal te centreren, maakt u van het item een (geneste) flex container, en herhaalt u de centreerregels.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Meer details hier: https://stackoverflow.com/q/25311541/3597276
Als alternatief kunt u margin: auto
toepassen op het content element van het flex item.
p { margin: auto; }
Leer meer over flex auto
marges hier: Methods for Aligning Flex Items (zie box#56).
Wanneer een flex container meerdere regels heeft (door wrapping) zal de align-content
eigenschap nodig zijn voor cross-axis uitlijning.
Van de spec:
8.4. Packing Flex Lines: de
align-content
eigenschapDe
align-content
property lijnt de lijnen van een flex container uit binnen de flex container als er extra ruimte in de dwarsas is, vergelijkbaar met hoejustify-content
individuele items uitlijnt binnen de hoofd-as. Note, deze eigenschap heeft geen effect op een enkellijns flex container.
Meer details hier: https://stackoverflow.com/q/42613359/3597276
Flexbox wordt ondersteund door alle belangrijke browsers, behalve IE < 10. Sommige recente browser versies, zoals Safari 8 en IE10, vereisen leverancier prefixen. Voor een snelle manier om voorvoegsels toe te voegen gebruik je Autoprefixer. Meer details in dit antwoord.
Voor een alternatieve centreeroplossing met CSS tabel en positioneringseigenschappen zie dit antwoord: https://stackoverflow.com/a/31977476/3597276
Vergeet niet om belangrijke browserspecifieke attributen te gebruiken:
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;
Je zou deze twee links kunnen lezen voor een beter begrip van flex: http://css-tricks.com/almanac/properties/j/justify-content/ en http://ptb2.me/flexbox/
Veel succes.