nicht angemeldet franzsen
franzsen
franzsen
franzsen
franzsen
Auge
franzsen
Tabellenkalk
Der Martin
franzsen
Hallo!
Wenn man dem Container (flexbox) eine Breite in em oder px zuweist funktioniert flex-wrap nicht; nur bei prozentueller Breite. Hat das seine Richtigkeit oder mache ich hier irgendwo einen Fehler?
Ich habe folgendes ausprobiert:
CSS-Code (in Kurzform):
div: flex;
wrap;
Breite 80%;
space-between;
artikel:
Breite 15em;
section:
Breite 65em;
<div>
<articel>
</articel>
<section>
</section>
</div>
Sobald ich bei div die Breite in em oder px angebe gibt es keinen Umbruch bei den items sobald ich das Browserfenster verkleinere. Natürlich habe ich bei der Breite von div die Größe für die items berücksichtigt. Es bleibt genügend Zwischenraum der aber beim Verkleinern des Browsers verschwinden müßte.
Hallo
Es wäre schön wenn du dir endlich mal angewöhnen würdest vernünftige Quellcodeschnipsel mit Inhalt oder am besten einen Link zu deinen Versuchen bereitzustellen.
So können deine Fehler nur erraten werden. Das macht uns unnötige Arbeit und zudem keinen Spaß.
Im Moment fällt mir nur auf dass du articel statt article schreibst.
Gruss
MrMurphy
Hallo
Es wäre schön wenn du dir endlich mal angewöhnen würdest vernünftige Quellcodeschnipsel mit Inhalt oder am besten einen Link zu deinen Versuchen bereitzustellen.
Ich dachte, für die Frage ob für die Flexbox em, px oder Prozent zum wrapen einen Unterschied ausmacht kein eigener Quellcode notwendig ist. Es wäre eine Grundsatzfrage und wenn dies nicht zutrifft "Größeneinheiten spielen keine Rolle" dann hätte ich mein Übungsbeispiel nachgereicht. Wollte eigentlich den Text nicht unnötig aufblähen.
So können deine Fehler nur erraten werden. Das macht uns unnötige Arbeit und zudem keinen Spaß.
Frage noch einmal anders formuliert:
"Ist bei einer Flexbox die Größeneinheit em, px oder Prozent relevant damit "flex-wrap: wrap;" funktioniert?"
Im Moment fällt mir nur auf dass du articel statt article schreibst.
Ist ein Schreibfehler und würde im Code auffallen.
Zusätzlich noch der link. Mit "%" funktioniert der Umbruch, gebe ich allerdings 90em oder 1440px ein, also eine größere Breite als Artikel und Sektion zusammen, funktioniert es nicht mehr.
Gruss
MrMurphy
Hallo
gebe ich allerdings 90em oder 1440px ein, also eine größere Breite als Artikel und Sektion zusammen, funktioniert es nicht mehr.
Wenn die Breite des äußeren Containers breiter ist als die innen liegenden ist kein Umbruch erforderlich, egal wie klein/groß das Fenster ist.
Bei rem, px oder em bleibt die Breite des äußeren Containers unabhängig von der Fensterbreite immer gleich.
Bei Prozent ist die Breite des äußeren Containers von der Fenstergröße abhängig.
Das wrap funktioniert in allen Fällen unabhängig von der gewählten Einheit. Es ist halt nur bei festen Breiten (rem, px, em) in deinem Beispiel nicht erforderlich und wird entsprechend auch nicht ausgeführt oder angezeigt.
Gruss
MrMurphy
Hallo
gebe ich allerdings 90em oder 1440px ein, also eine größere Breite als Artikel und Sektion zusammen, funktioniert es nicht mehr.
Wenn die Breite des äußeren Containers breiter ist als die innen liegenden ist kein Umbruch erforderlich, egal wie klein/groß das Fenster ist.
Bei rem, px oder em bleibt die Breite des äußeren Containers unabhängig von der Fensterbreite immer gleich.
Bei Prozent ist die Breite des äußeren Containers von der Fenstergröße abhängig.
Das wrap funktioniert in allen Fällen unabhängig von der gewählten Einheit. Es ist halt nur bei festen Breiten (rem, px, em) in deinem Beispiel nicht erforderlich und wird entsprechend auch nicht ausgeführt oder angezeigt.
Eigentlich logisch. Die vorgegebene Breite des Containers bleibt unabhängig von der Größe des Browserfensters immer gleich; somit haben die items auch immer Platz.
Anders ist die Größe des Containers bei Prozentangabe. Diese richtet sich immer am Viewport aus. Somit kann es bei einem kleinerem Fenster für die items eng werden und rutschen in die nächste Zeile.
Ist es möglich, daß man dem ersten item eine fixe Größe gibt und die zweite bzw. weiteren teilen sich den Rest auf?
Hallo
Ist es möglich, daß man dem ersten item eine fixe Größe gibt und die zweite bzw. weiteren teilen sich den Rest auf?
Ja. Das geht mit den CSS-Eigenschaften
Die können auch zu
flex
zusammengefasst werden. Aber nur mit der Aufteilung ist im Bedarfsfall calc möglich.
Wenn flex-grow und flex-shrink den Wert 0 haben ist die Breite von flex-basis fest. Zum Beispiel
article {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 250px;
}
Mit dem Wert 1 für flex-grow und flex-shrink ist der Container flexibel, zum Beispiel
section {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
Auf flex-wrap sollte dann verzichtet werden. Falls doch ein Zeilenumbruch erforderlich ist müssen eventuell padding, border und margin mit calc berücksichtigt werden. Bei Zeilenumbrüchen zickt Flexbox manchmal rum.
Gruss
MrMurphy
Hallo
Ist es möglich, daß man dem ersten item eine fixe Größe gibt und die zweite bzw. weiteren teilen sich den Rest auf?
Ja. Das geht mit den CSS-Eigenschaften
- flex-grow
- flex-shrink
- flex-basis
Die können auch zu
flex
zusammengefasst werden. Aber nur mit der Aufteilung ist im Bedarfsfall calc möglich.
Ja, das ist mir bereits bekannt. Calc?
Wenn flex-grow und flex-shrink den Wert 0 haben ist die Breite von flex-basis fest. Zum Beispiel
article { flex-grow: 0; flex-shrink: 0; flex-basis: 250px; }
Muß in diesem Fall überhaupt flex-grow bzw. flex-shrink zusätzlich angegeben werden oder reicht eine Eingabe? Welche Eingabe erfordert dann das zweite bzw.dritte item ...? Beispielsweise habe ich ein item mit Navigation das ja eigentlich eine feste Breite haben kann bzw. soll, da es sich ja nicht ändert. Das zweite item soll den Rest ausfüllen. Allerdings erübrigt dann sich "Justify-content"? Jedoch muß beim ersten item margin-right gesetzt werden um einen Abstand zwischen beiden items zu bekommen. Ich habe bei Navigation flex-basis: 250px; gesetzt und section flex-grow: 1; damit wird der gesamte Container ausgefüllt. Sollen die Breite von items generell mit flex-basis und nicht mit width festgelegt werden?
Mit dem Wert 1 für flex-grow und flex-shrink ist der Container flexibel, zum Beispiel
section { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }Auf flex-wrap sollte dann verzichtet werden. Falls doch ein Zeilenumbruch erforderlich ist müssen eventuell padding, border und margin mit calc berücksichtigt werden. Bei Zeilenumbrüchen zickt Flexbox manchmal rum.
Das war mir aus einigen Beispielen klar. Es wird immer im Verhältnis a:b:... dargestellt. Was bringt es flex-grow: 1; und flex-shrink: 1; gleichzeitig zu setzen; Gleichzeitig vergrößern bzw. verkleinern?
Hello,
Ja, das ist mir bereits bekannt. Calc?
yes?
greetings
Calc
Hello,
Ja, das ist mir bereits bekannt. Calc?
yes?
Ja, beim Beschäftigen mit dem Thema ist auch dieser Teil vorgekommen. Allerdings ist mir mehr die relative Breite item a: 1, item b: 2 also im Verhältnis a:b eher verständlich gewesen. Bisher hatte ich es nicht benötigt aber jetzt möchte ich mich auch mit diesem Teil näher beschäftigen.
Was ist mit calc gemeint?
Hallo
Was ist mit calc gemeint?
Ach weeste, wie man eine Suche, z.B. die unseres Wikis zum Thema Webtechniken, bedient, solltest du doch wohl wissen, oder? Für den Fall, dass nicht, bitteschön.
Tschö, Auge
Ach weeste, wie man eine Suche, z.B. die unseres Wikis zum Thema Webtechniken, bedient, solltest du doch wohl wissen, oder? Für den Fall, dass nicht, bitteschön.
Ich habe das nicht als Code verstanden und bin daher gar nicht auf den Gedanken gekommen bei WIKI nachzusehen. Ist eh klar, daß ich immer im Schnellindex oder Referenz nachsehe wenn ich etwas brauche. Und um ehrlich zu sein, alles aus dem Index kann ich noch nicht wissen. Um sich das ganze Wissen anzueignen bedarf es schon eine längere Zeit. Ich arbeite halt immer nach Themen durch (Liste, Tabelle, Flexbox, etc,...) und das dazu notwendige CSS. Formulare, Maps usw. habe ich beispielsweise noch nicht in Angriff genommen. Alles auf einmal geht halt nicht. Außerdem habe ich mir Bücher dazu ausgeliehen die eben auch nur spezifische Themen und Codes bearbeiten.
Was für einen Vorteil bringt calc eigentlich? die Dinge kann man ja auch im Taschenrechner ausrechnen.
Beispielsweise:
"min-height: calc(100px + 5em);"
Da könnte ich ja gleich rechnen 1em = 16px macht 80px also schreibe ich "min-height: 180px;".
Oder gibt es andere Vorteile die ich mangels Praxis noch nicht kenne?
Hallo,
Was für einen Vorteil bringt calc eigentlich? die Dinge kann man ja auch im Taschenrechner ausrechnen.
Oder gibt es andere Vorteile die ich mangels Praxis noch nicht kenne?
nun ja, es hat den Vorteil, dass du nicht jeden deiner Besucher bitten musst, das auszurechnen, sondern lässt das den Browser tun. Es kann doch jeder mit unterschiedlichen Displays und Display-Einstellungen ankommen!
Gruß
Kalk
Hallo
Oder gibt es andere Vorteile die ich mangels Praxis noch nicht kenne?
Ja. Du musst grade nicht zum Taschenrechner greifen. Anpassungen oder spätere Änderungen sind dadurch viel einfacher.
Außerdem kann auch mit flexiblen Einheiten gerechnet werden, die von der jeweiligen Fenstergröße abhängen. Zum Beispiel mit Prozent.
Also genau zu deinem Wunsch mit einer festen und einer flexiblen Spalte passend.
Nebenbei: Das 1em nicht unbedingt 16px sind sollte dir inzwischen aber schon bekannt sein.
Gruss
MrMurphy
Hallo,
Was für einen Vorteil bringt calc eigentlich? die Dinge kann man ja auch im Taschenrechner ausrechnen.
ja, aber nicht anhand der tatsächlichen Verhältnisse, die beim aktuellen Zoomfaktor, der aktuellen Browserfenstergröße und der aktuellen Schriftgröße gerade herrschen.
Beispielsweise:
"min-height: calc(100px + 5em);"
Da könnte ich ja gleich rechnen 1em = 16px macht 80px also schreibe ich "min-height: 180px;".
Und schon geht's in die Hose. Woher nimmst du die Entsprechung 1em = 16px? Mag sein, dass 16px die in vielen Browsern voreingestellte Standard-Schriftgröße ist. Aber erstens kann man das als Nutzer fast beliebig verstellen (jemand, der schlecht sieht, aber einen Full-HD-Bildschirm benutzt, stellt sich die Basis-Schriftgröße vielleicht auf 24px); zweitens bezieht sich die Einheit em nicht auf die Basis-Schriftgröße, sondern immer auf die aktuelle Schriftgröße des Elternelements. Wenn also im Elternelement font-size: 30px; vereinbart wurde und ich notiere fürs Kindelement font-size: 0.8em;, dann sind das eben 0.8 mal 30px, also 24px.
Oder gibt es andere Vorteile die ich mangels Praxis noch nicht kenne?
Die Möglichkeit, verschiedene Einheiten mischen zu können, ist eigentlich der Hauptvorteil.
So long,
Martin
Hallo
Ist es möglich, daß man dem ersten item eine fixe Größe gibt und die zweite bzw. weiteren teilen sich den Rest auf?
Ja. Das geht mit den CSS-Eigenschaften
- flex-grow
- flex-shrink
- flex-basis
Die können auch zu
flex
zusammengefasst werden. Aber nur mit der Aufteilung ist im Bedarfsfall calc möglich.
Wenn flex-grow und flex-shrink den Wert 0 haben ist die Breite von flex-basis fest. Zum Beispiel
article { flex-grow: 0; flex-shrink: 0; flex-basis: 250px; }Mit dem Wert 1 für flex-grow und flex-shrink ist der Container flexibel, zum Beispiel
section { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }Auf flex-wrap sollte dann verzichtet werden. Falls doch ein Zeilenumbruch erforderlich ist müssen eventuell padding, border und margin mit calc berücksichtigt werden. Bei Zeilenumbrüchen zickt Flexbox manchmal rum.
Nun, das habe ich soweit intus. Getestet habe ich nach meiner Möglichkeit am iMac 27" und 13" MacBook Pro. Ein Bekannter hat sich die Seite mit seinem tablet angesehen und bis auf ein paar Kleinigkeiten nichts gefunden. Außer dem persönlichen Layout-Eindruck ist es am tablet für den Benutzer lesbar. Lediglich am Mobiltelephon, also kleineren Viewports, gibt es Probleme.
Beim Hauptmenü paßt alles; nicht aber wenn ich ein Rezept in einem neuen Tab aufrufe. Wie zu sehen ist, habe ich auf der Seite die Liste mit den Rezeptnamen. Rechts davon wird das Rezept angezeigt. Beide items sind in einem Container zentriert. Die Liste benötigt eine Mindestbreite, während das Rezept sich den restlichen Platz nimmt. Somit haben flex-grow und flex-shrink den Wert 0 und die Breite von flex-basis ist fest. Läßt sich das auch so steuern, daß man flex-shrink auf 1 setzt aber nur bis zu einer gewissen Breite da die Liste ja noch lesbar bleiben soll.
Eine etwaige Lösung:
Der Container ist mit 70% Breite zentriert ansonst würde das am iMac ziemlich verloren aussehen. Somit verbleiben links und rechts aufgeteilt 30%. Dies geht bei einem tablet bzw. Mobiltelephone ab. Wie läßt sich das steuern, daß sich der Container ab einer Viehport-Breite auf 100% vergrößert?
Eine weitere Möglichkeit wäre die Liste auszublenden in ein kleines Kästchen wie ich schon gesehen habe. Wenn man darauf klickt bekommt man die Liste mit den links. Mit einer Auswahl bekommt man dann nur das Rezept. Wäre das eine Lösung? Welche ist die vernünftigere? Wo finde ich so einen Beispielcode?
Eine weitere Frage hätte ich dazu, auch wenn es nicht direkt mit dem einleitendem Thema zu tun hat, aber zumindest mit der Darstellung mit IOS- und ähnlichen Systemen. In Lektüren liest man immer, daß die Adresse mittels "@" und den Namen angegeben wird und beim auswählen soll die Email-Adresse angezeigt werden. Bei Mobiltelephonen ist hover ja nicht möglich. Wie macht man das bei solchen Geräten? Sind außerdem tooltips hier nicht möglich. Unverständlich ist mir allerdings warum der link nicht funktioniert? Auch wenn mit hover der Code nicht ausgeführt wird, der Adress-link ist ja trotzdem vorhanden?