Flexbox

html.de-Forum HTML, XHTML & CSS
1

hab ein flexbox. in der flexbox sind zwei divs die eben nebeneinander sein sollen, und sich erst dann verschieben wenn kein platz mehr ist.

nur bekomm ich das mit dem Code nicht so hin bzw. weiß ich nicht wo der fehler ist.

[PHP]

<?php if (array_key_exists('1',$portfoliotext_array)) { echo "
"; echo htmlspecialchars_decode($portfoliobild_array[1]); --> Ein Bild wird ausgelesen echo "
"; echo "
"; echo htmlspecialchars_decode($portfoliobild_array[1]); echo "
"; } ?>
[/PHP]

[Code]
CSS:

#portfoliosmartphone1 {
overflow: auto;
margin-left: 5%;
margin-top: 2%;
display: flexbox;
}

div.portfoliosmartphone1 bild1smartphone {
z-index: 1;
width: 30%;
background-color: #E6E6E6;
border-radius: 20px;
overflow: hidden;
}

div.portfoliosmartphone1 bild2smartphone {
z-index: 1;
width: 30%;
background-color: #E6E6E6;
border-radius: 20px;
overflow: hidden;
}

Was mache ich falsch?[/Code]

2

display: flexbox gibt es nicht.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3

Gut den Fehler hab ich auch bemerkt. Aber was is dann noch falsch?
Hab es vorher mit Bildern gemacht, wenn es ich vom platz nicht ausgeht verschiebt er das Bild einfach eine Reihe runter, dazu definierte ich nur ein div mit Display: Flex.

4

Das ist mit an Sicherheit grenzender Wahrscheinlichkeit auch falsch.

div.portfoliosmartphone1 bild1smartphone

Warum baust du das Markup nicht erstmal statisch und prüfst es mit den Dev Tools deines Browsers?

5

kann es leider nur am Handy prüfen, weiß nicht wie ich es dort mittels dev Tools kontrollieren soll.
hab es jetzt aufh #bild1smartphone geändert, jedoch bleiben die zwei untereinander.

6

Simuliere das Handy doch mit Entwicklertools am Desktop-Browser. Geht beim Firefox und Chrome auch ohne zusätzliches Addon.

7

nach den dev Tools wird Flex durchgestrichen aber warum?

8

fehler gefunden, ich schalte es mit Display: block ein und somit übernimmt er das Flex nicht mehr

9

Welche Eigenschaft genau?

10

über JavaScript schalte ich das div mit Display: block ein. Und inline hat Vorrang und somit übernimmt er Display: Flex aus der css Datei nicht.

11

Und genau deshalb verwendet man nie Inline-Styles.
Verwende stattdessen Klassen.