Flexbox
0 
Matthias Apsel
0 0 0 Flexbox - und die verschiedenen Browser
0 
Gunnar Bittersmann
0 0 0 
molily
0 Matthias Apsel
Flexbox
Moin,
in diesem Beitrag hat Matthias Apsel auf den Artikel über flexbox verwiesen.
Darauf hin wollte ich ein eigenes Beispiel machen und in Firefox testen:
<!DOCTYPE html>
<head>
<style type="text/css">
body
.flexbox {
display:-moz-box;
display:-webkit-box;
display: box;
}
#box-links {
width: 50%;
height: 500px;
background-color: red;
}
#box-rechts {
width: 50%;
height: 500px;
background-color: green;
}
</style>
</head>
<body>
<section id="box-links" class="flexbox">
<h1>1</h1>
<p>Hallo 12345678901234567890123456789012345678901234567890123456789012345678901234567890
</p>
</section>
<section id="box-rechts" class="flexbox">
<h1>2</h1>
<p>Hallo</p>
</section>
</body>
</html>
Dabei haben mich zwei Dinge irritiert:
1. Es gibt keinen Zeilenwechsel nach <h1>...</h1>
2. Der Text Hallo 12..... wird einfach abgeschnitten
Woran liegt dies?
Ich habe jetzt auch festgestellt, dass in den flexbox-Beispielen immer nur ein kurzer einzeiliger Text verwendet wurde.
-
Om nah hoo pez nyeetz, Mitleser!
Dabei haben mich zwei Dinge irritiert:
- Es gibt keinen Zeilenwechsel nach <h1>...</h1>
- Der Text Hallo 12..... wird einfach abgeschnitten
Woran liegt dies?
Ich habe jetzt auch festgestellt, dass in den flexbox-Beispielen immer nur ein kurzer einzeiliger Text verwendet wurde.
1. display: flex muss das umgebende Element bekommen, in deinem Fall also body. Du hast aber flex an die sections verteilt, also wurden die Inhalte, h1 und p flexibel angeordnet.
2. Es gibt automatische Zeilenumbrüche an Leerzeichen.
Matthias
-
Moin,
- Es gibt automatische Zeilenumbrüche an Leerzeichen.
Auch wenn ich Leerzeichen angebe, erfolgt kein Umbruch.
Gruß-
Om nah hoo pez nyeetz, Mitleser!
- Es gibt automatische Zeilenumbrüche an Leerzeichen.
Auch wenn ich Leerzeichen angebe, erfolgt kein Umbruch.
Wenn du 1. beachtest, schon.
Matthias
- Es gibt automatische Zeilenumbrüche an Leerzeichen.
-
Moin!
in diesem Beitrag hat Matthias Apsel auf den Artikel über flexbox verwiesen.
Darauf hin wollte ich ein eigenes Beispiel machen und in Firefox testen:<!DOCTYPE html>
<head>
<style type="text/css">
body
.flexbox {
display:-moz-box;
display:-webkit-box;
display: box;
}
#box-links {
width: 50%;
height: 500px;
background-color: red;}
#box-rechts {
width: 50%;
height: 500px;
background-color: green;}
</style>Vielleicht solltest du den o.g. Artikel nochmal in Ruhe lesen ...! ;-) Das fängt schon bei deinen Werten für 'display' an - 3 Zeilen und 2 Fehler. Auch empfehle ich dringend, sich anzugucken (und zu verstehen) wie die Größen für Elemente innerhalb eines Flexcontainers angegeben werden und welche weiteren Optionen es gibt. Die aktuelle FF Version 23 unterstützt jetzt auch die neueste Syntax (ohne Vendor Prefix) - die Vorgängerversionen standardmäßig (ohne Änderung in der Config) nur die alte Syntax mit '-moz-box'. Das Flexbox-Modul gehört zu den etwas "komplexeren" und nicht ganz einfach zu verstehenden Modulen - von den 3 verschiedenen Versionen und den unterschiedlichen Browserbugs mal abgesehen. Aber "gnaz so einfach" wie du dir das vorgestellt hast, ist es eben nicht. ;-) Gruß Gunther -
Hallo Mitleser!
Empfehlenswert in diesem Zusammenhang finde ich diese beiden (englischen) Tutorial-Videos auf Youtube:
Mit lieben Grüßen
Melvin Cowznofski
--
What – me worry? -
Moin,
dank Eurer Hilfe habe ich jetzt schon eine funktionierende Flexbox-Seite hinbekommen.
Jetzt aber eine weitere Frage:
Auf dieser Seite wird dargestellt, wo Flexbox schon möglich ist.
Heißt dort das "Partial support", dass es mit den -moz-, -webkit- u.a. funktioniert aber ohne nicht oder aber müsste man jede Änderung von Parametern in den Flexboxen jeweils in all diesen Browsern testen um sicher zu gehen?
Das wäre ja ein immenser Aufwand!Moin
-
@@Mitleser:
nuqneH
Heißt dort das "Partial support", dass es mit den -moz-, -webkit- u.a. funktioniert aber ohne nicht oder aber müsste man jede Änderung von Parametern in den Flexboxen jeweils in all diesen Browsern testen um sicher zu gehen?
http://www.jordanm.co.uk/post/53179333055/building-for-content-choreography-using-flexbox
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Moin Gunnar,
http://www.jordanm.co.uk/post/53179333055/building-for-content-choreography-using-flexbox
Das ist ja irre, man kann also nicht nur jeweils -moz- und andere Prefixes voransetzen, sondern muss auch noch andere Namen verwenden.
Auf der von Dir zitierten Seite sind nun allerdings nur einige Parameter erläutert.
Gibt es, besser kennt Ihr eine Gesamtübersicht der Art:
Standard Browser1 ..... ..... .....
flex -moz-box -webkit-box -ms-flexbox -webkit-flex
order -moz-box-ordinal-group .....
?
Moin-
Moin,
http://www.jordanm.co.uk/post/53179333055/building-for-content-choreography-using-flexbox
... und es kommt noch schlimmer.
Auf der oben zitierten Seite heißt es
-moz-box und -webkit-box
in der von Melvin zitierten
Youtube-Demo
heißt es
-moz-flex und -webkit-flex.
Was ist richtig?-
Hallo,
http://www.jordanm.co.uk/post/53179333055/building-for-content-choreography-using-flexbox
Auf der oben zitierten Seite heißt es
Bitte lies den Text genau.
-moz-box und -webkit-box
-moz-flex und -webkit-flex.
Was ist richtig?Beides. Das steht in den Artikeln, die dir hier gegeben worden, auch drin.
Es gibt aus historischen Gründen mehrere Schreibweisen (und inhaltliche Unterschiede!). Die neuesten Browser unterstützen die neueste (und bald standardisierte) Syntax, ältere nur veraltete Entwürfe der Spezifikation.
Siehe auch
http://css-tricks.com/old-flexbox-and-new-flexbox/
http://css-tricks.com/using-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/… wurde hier z.T. ja schon verlinkt.
Mathias
-
-
-
-
Om nah hoo pez nyeetz, Mitleser!
Heißt dort das "Partial support", dass es mit den -moz-, -webkit- u.a. funktioniert aber ohne nicht oder aber müsste man jede Änderung von Parametern in den Flexboxen jeweils in all diesen Browsern testen um sicher zu gehen?
Das wäre ja ein immenser Aufwand!"Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden."
Matthias
-
Hallo Matthias,
"Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden."
das ist aber keine Antwort auf meine Frage, oder doch?
-
Om nah hoo pez nyeetz, Mitleser!
das ist aber keine Antwort auf meine Frage, oder doch?
Doch. Du schreibst einfach alle Varianten auf, die die Browser betreffen, welche du unterstützen möchtest.
foo { display: -moz-box; /* FX 2 - 21, FX für Android */ display: -webkit-box; /*Safari */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome */ display: flex; }Die Browser suchen sich das passende aus. Wenn mehrere zutreffen, überschreiben nachfolgende Deklarationen ihre Vorgänger.
Mehr über browserspezifische flex-Angaben: http://css-tricks.com/using-flexbox/
Matthias
-
-
-
