nicht angemeldet
Nachteile bei Horizontal und Vertikal zentrieren per flex-Box?
OleIch hab nach einer Möglichkeit gesucht wie ich einen Wrapper zentrieren kann ohne umständliche Angaben mit Breite oder Höhe -50% oder festgelegte Höhen oder Einschränkungen auf mobilen Endgeräten ohne media-query oder oder oder... Irgendwas hat mich bei fast jeder Lösung gestört.
Ich habe mir jetzt überlegt, dass man das doch eigentlich auch mit einer Flexbox lösen könnte.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zentrierung mit Flex-Boxen</title>
<style type="text/css">
html {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-image: -moz-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);
background-image: -webkit-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);
background-image: -ms-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);
background-image: -o-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
color: #262626;
margin: 0 auto;
width: 400px;
max-width: 60%;
display: -webkit-flex;
display: flex;
align-items: center;
text-align: left;
}
#wrapper{
background: #f0ebc0;
-webkit-flex-basis: 100%;
flex-basis: 100%;
min-height: 5em;
max-height: 100%;
box-shadow: 0px 0px 5px 2px #C3C3C3;
}
#wrapper * {
padding: 5px;
margin: 0;
}
h1 {
font-size: 1.2em;
background: #fff;
border-bottom: 1px solid #c3c3c3;
}
h2 {
font-size: 1em;
border-bottom: 2px dotted #c3c3c3;
}
h3 {
font-size: 1em;
}
a {
font-size: 0.8em;
background: #fff;
display: block;
border-top: 1px solid #c3c3c3;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<p>tons of text. uhm.. or not</p>
<a href="#">Zentrierung mit Flex-Boxen</a>
</div>
</body>
</html>
Was haltet ihr davon? Gibt es bei dieser Variante Nachteile (abgesehen von der Unterstützung in älteren Browsern) oder sogar Vorteile?
Ich fand die Lösung ziemlich kurz und "angenehm" was den Quelltext und das CSS angeht. Nimmt man die Angaben zu Farben, Rändern und Schriftgrößen weg, ist der Code doch recht schlank und es scheint auch alles wunderbar zu funktionieren.
-
Flexbox ist die Lösung vieler Probleme, aber IMO leider für die meisten Projekte noch nicht produktiv einsetzbar, da die Unterstützung doch sehr unterschiedlich ist
Gruß
Ole -
Hallo,
Gibt es bei dieser Variante Nachteile (abgesehen von der Unterstützung in älteren Browsern) oder sogar Vorteile?
Flexbox ist langfristig der sinnvollste Weg. Flexbox ist genau dafür gedacht, alles andere ist kreative Zweckentfremdung, um es mal positiv auszudrücken.
Browserunterstützung von Flexbox aber ein dringendes Thema, auch verschiedene unterstützte Flexbox-Versionen.
Flexbox halte ich hier nicht für unbedingt notwendig, es ginge auch mit display: table, soweit ich das sehe. Das funktioniert in allen halbwegs aktuellen Browsern ohne Gefrickel.
Mathias