/ / Flexbox div nimmt nicht die ganze Breite - html, css, css3, flexbox

Flexbox div nimmt nicht die ganze Breite - html, css, css3, flexbox

Ich versuche zu verstehen, wie display:flex funktioniert, aber wenn ich es setze, nehmen die Kinder nicht die ganze Breite. Ich habe erwartet, dass die drei divs 33% der Bildschirmbreite bekommen. Was mache ich falsch?

.flexbox {
display: flex;
}

.flexbox div {
border: 1px solid black;
padding: 10px;
}
<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

Antworten:

3 für die Antwort № 1

Sie müssen Flex-Elemente angeben, um sie zu erweitern. Sie verbrauchen standardmäßig keinen freien Speicherplatz.

Die ursprüngliche Einstellung von flex-basis ist auto, was bedeutet, dass Elemente die Größe ihres Inhalts annehmen.

Die ursprüngliche Einstellung von flex-grow ist 0, was bedeutet, dass Gegenstände nicht über den verfügbaren Platz wachsen.

Hinzufügen flex: 1 auf Ihre Artikel, was entspricht: flex: 1 1 0, das ist die Abkürzung für:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0.

.flexbox {
display: flex;
}

.flexbox div {
flex: 1;  /* new */
border: 1px solid black;
padding: 10px;
}
<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>


1 für die Antwort № 2

Bitte schön:

<html>
<head>
<style>

.flexbox {
display: flex;
}
.flexbox div {
flex: 1;
border: 1px solid black;
padding: 10px;
}

</style>
</head>
<body>
<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>

Um die untergeordneten Elemente wachsen zu lassen, müssen Sie ihnen eine der Flex-Eigenschaften hinzufügen. Hier ist ein großartiger Artikel über flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/