Breite bei Flexbox-Elementen ignoriert

Question 1

Ich habe width: 200px;links eingestellt, <div>aber wenn ich es mit dem Browser-Inspektor-Tool ansehe, scheint die tatsächliche Breite zufällig zu sein oder so. Es ändert sich ständig je nach Fenstergröße.

Warum wird die Breite nicht wirksam?

BEARBEITEN : Wenn ich entferne, width: 100%bleibt die Breite fest. Aber ich brauche das, damit das #maindiv die verbleibende Breite annimmt :( Gibt es eine Möglichkeit, die Seitenleiste bei fester Breite zu haben und die andere <div>den Rest der Containerbreite auszufüllen? width: auto;On #mainfunktioniert nicht.

Question 2

Entfernen Sie die Breite auf .container > divund verwenden Sie flex: auto;auf #main: Geige

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}

Question 3

Die Antwort von Adrift ist perfekt; aber eine Änderung, um es flexibler zu machen, wäre

#left{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

Und entfernen Sie die Eigenschaft width vollständig.

Es wäre die flexible Art zu sagen, dass das Element eine unveränderliche Breite von 200px haben wird

Question 4

Meine bevorzugte Art, mit dieser Situation umzugehen, besteht darin, Folgendes hinzuzufügen:

flex-shrink: 0;

Auf diese Weise können Sie die Verwendung widthin Ihrem Flex-Container fortsetzen und ihm spezifische Informationen darüber geben, wie sich dieses Flex-Element verhalten soll.

Eine weitere Option, abhängig von der Anforderung, ist die Verwendung min-width, die bei der Verwendung von Flex berücksichtigt wird .

Question 5

Geben Sie dem #leftdiv ein min-widthvon 200px, sollte den Job machen.

Question 6

display: contentsFügen Sie das Element oder div hinzu, für das Sie die Breite beibehalten möchten.

Question 7

Auch (wenn nichts von oben funktioniert)

Überprüfen Sie Ihre minimale und maximale Breite . Es hat das gleiche Problem für mich behoben, indem ich ihre Reichweite vergrößert habe.

Question 8

display:inline-block;In der linken Klasse hinzufügen

Answer 1

76

http://jsfiddle.net/XW9Se/

Ich habe width: 200px;links eingestellt, <div>aber wenn ich es mit dem Browser-Inspektor-Tool ansehe, scheint die tatsächliche Breite zufällig zu sein oder so. Es ändert sich ständig je nach Fenstergröße.

Warum wird die Breite nicht wirksam?

BEARBEITEN : Wenn ich entferne, width: 100%bleibt die Breite fest. Aber ich brauche das, damit das #maindiv die verbleibende Breite annimmt :( Gibt es eine Möglichkeit, die Seitenleiste bei fester Breite zu haben und die andere <div>den Rest der Containerbreite auszufüllen? width: auto;On #mainfunktioniert nicht.

css width flexbox Alex
quelle

2

Ist das nicht die ganze Idee einer Flexbox, die sich beim Ändern der Fenstergröße ändert?

Gpgekko

2

Ja, aber ich möchte nur, dass 1 Flex-Säule die Breite ändert: P

Alex

1

Versuchen Sie flex-flow: wrap;, dem Container

hinzuzufügen

1

fyi: Flex-Shrink ist standardmäßig 1

Hayden Thring

Answer 2

2

Ist das nicht die ganze Idee einer Flexbox, die sich beim Ändern der Fenstergröße ändert?

Gpgekko

Answer 3

2

Ja, aber ich möchte nur, dass 1 Flex-Säule die Breite ändert: P

Alex

Answer 4

1

Versuchen Sie flex-flow: wrap;, dem Container

hinzuzufügen

Answer 5

1

fyi: Flex-Shrink ist standardmäßig 1

Hayden Thring

Answer 6

Entfernen Sie die Breite auf .container > divund verwenden Sie flex: auto;auf #main: Geige

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}

Answer 7

172

Die Antwort von Adrift ist perfekt; aber eine Änderung, um es flexibler zu machen, wäre

#left{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

Und entfernen Sie die Eigenschaft width vollständig.

Es wäre die flexible Art zu sagen, dass das Element eine unveränderliche Breite von 200px haben wird

vals
quelle

42

Kurzschrift:flex: 0 0 200px;

Dan

20

Fügen Sie einfach eine flex-shrink: 0Eigenschaft hinzu, und die CSS-Breite wird berücksichtigt.

Ashish Rawat

Dies zusammen mit order: 2(um es nach rechts zu schalten) funktionierte einwandfrei, um eine Seitenwand zu erstellen. Vielen Dank!

Robert Molina

1

Ich wollte nur hinzufügen, dass ich nur flex-shrink: 0mein persönliches Problem beheben musste (wo es flex: autoallein nicht behoben wurde)

Jawad

Answer 8

42