Breite und flexible Gegenstände gut zusammen spielen

Kurze Antwort: flex-shrink und flex-basis sind höchstwahrscheinlich die Lösungen, nach denen Sie suchen.

Detaillierte Antworten

Angenommen, Sie möchten, dass das Bild und der Text nebeneinander nebeneinander angeordnet werden:

Angenommen, Sie verwenden Flexbox, um dies zu erreichen. Festlegen des übergeordneten Elements zum display: flex; ist ein guter Anfang.

 <code>.container { display: flex; }</code>

sich herausstellen……

Hoppla! Ok, ich finde das akzeptabel. Es ist sinnvoll, dass das Bild nahe am Text liegt, da wir nicht die Breite des Bildes festlegen. Idealerweise möchten wir, dass das Bild eine feste Breite hat, und der Text nimmt dann den verbleibenden Raum ein.

Ok, lass es uns tun!

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; }</code>

Das sieht in Chrome gut aus. Aber warte, was? Wenn wir das Bild -Tag in Firefox Devtools überprüfen, werden wir feststellen, dass es nicht der Breitenwert ist, den wir überhaupt festgelegt haben:

Wir können mit min-width das Bild erzwingen, um die gewünschte 50px-Breite zu erreichen:

 <code>img { min-width: 50px; margin-right: 20px; }</code>

Dies wird jedoch nur dazu beitragen, die Breite festzulegen, daher müssen wir auch einen Vorsprung hinzufügen.

 <code>img { min-width: 50px; margin-right: 20px; }</code>

Das war's. Besser in Firefox und funktioniert immer noch in Chrome.

Detailliertere Antworten

Mir wurde klar, dass das Bild komprimiert ist, da wir flex-shrink -Eigenschaft verwenden müssen, um Flex-Elemente nicht zu reduzieren, unabhängig davon, ob sie eine Breite haben oder nicht.

flex-shrink -Wert aller Flex-Projekte beträgt 1. Wir müssen das Bildelement auf 0 festlegen:

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; flex-shrink: 0; }</code>

Immer besser! Aber wir können immer noch mehr Verbesserungen vornehmen.

Endgültige Antwort

Wir können es weiter organisieren, da flex-shrink in flex Abkürzung enthalten ist.

 <code>flex: none | [ ? || ]</code>

Wenn wir den flex-shrink -Wert auf 0 einstellen und flex-basis -Wert auf die Standardbreite des Bildes einstellen, können wir width Breitenattribut vollständig beseitigen.

 <code>.container { display: flex; } img { flex: 0 0 50px; margin-right: 20px; }</code>

Oh ja:

Ein weiteres Beispiel

flex-shrink -Eigenschaft löst viele andere Probleme und es ist sehr wichtig, wenn Sie Flexbox verwenden möchten. Hier ist ein weiteres Beispiel dafür, warum: Ich bin auf eine andere Frage gestoßen, die den oben genannten ähnlich ist, die ich in meinem letzten Newsletter erwähnte. Ich erstelle eine Navigationskomponente, mit der der Benutzer mehrere Projekte links und rechts scrollen kann. Beim Überprüfen meiner Arbeit bemerkte ich die folgenden Probleme:

Längere Navigationselemente sollten nicht so einwickelt sein - aber ich habe dank früherer Fragen endlich bekommen, warum dies passiert. Wenn Sie flex-shrink -Eigenschaft auf 0 einstellen, werden jedes Element in dieser Navigation nicht schrumpfen, sondern wie folgt die Breite des Inhalts einnehmen:

Ja, wir können den zusätzlichen Schritt erneut tun, um das flex -Attribut zu verwenden, diesmal mit auto als flex-basis da wir für alle Elemente so viel Platz wie möglich berücksichtigen möchten, wenn Sie Platz im Navigationsbehälter zuweisen.

Es lebe! Wir haben es gelöst. Obwohl die Antwort nur eine Codezeile ist, ist es entscheidend, wirklich flexible Elemente zu erstellen.

Das obige ist der detaillierte Inhalt vonBreite und flexible Gegenstände gut zusammen spielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!