Flex Elemente untereinander teilweise verschoben

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

kercon

Mitglied
1 September 2010
109
0
16
Neubrandenburg
Hallo zusammen,
solange meine Flex-Elemente nebeneinander stehen ist alles ok, bei kleinen Ausgabegeräten sind meine beiden Elemente untereinander nicht mittig ausgerichtet... Was habe ich übersehen bzw. falsch definiert?

HTML:
<ul class="flex-container">
    <li class="flex-element"> --- </li>
    <li class="flex-element"> --- </li>
</ul>

CSS:
.flex-container {
margin-bottom: 25px;
padding:0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
list-style: none;
}

.flex-element {
max-width:510px;
padding: 8px 8px 0 8px;
text-align: justify;
border: solid 1px #ccc;
background-color:#fff;
box-shadow: 0 0 5px black;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin:0 0 10px 0;
}

Schonmal vielen Dank für Eure Tipps!
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.192
434
83
68
Hm, bei mir brechen die Elemente nicht um und werden nicht vertikal angeordnet, es sei denn, ich füge eine min-width hinzu. Und dann sind sie einwandfrei zentriert. Ich vermute, da gibt es noch anderes CSS, das die unerwünschten Effekte erzeugt.

BTW: Auf die ganzen browserspezifischen Regeln
Code:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
kannst Du heute unbesorgt verzichten.
 

kercon

Mitglied
1 September 2010
109
0
16
Neubrandenburg
Vielen Dank für den Tipp. Weitere Styles habe ich nicht gefunden, habe das Problem folgend lösen können

CSS:
.flex-container-start-top {
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content:center;
    list-style: none;
  }

.flex-element-start-top {
    max-width:510px;
    padding: 8px 8px 0 8px;
    text-align: justify;
    border: solid 1px #ccc;
    background-color:#fff;
    box-shadow: 0 0 5px black;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin:10px 12px 10px 12px;
    }
 
Werbung:
Werbung:

Neueste Beiträge