Próbuję zrozumieć, jak display:flex działa, ale kiedy go ustawiam, dziecko nie ma całej szerokości, spodziewałem się, że trzy divy uzyskają 33% szerokości ekranu. Co robię źle?
.flexbox {
display: flex;
}
.flexbox div {
border: 1px solid black;
padding: 10px;
}<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>Odpowiedzi:
3 dla odpowiedzi № 1Musisz powiedzieć flex itemom, aby się rozwinąć. Domyślnie nie zajmują one wolnego miejsca.
Początkowe ustawienie flex-basis jest auto, co oznacza, że przedmioty mają rozmiar ich treści.
Początkowe ustawienie flex-grow jest 0, co oznacza, że przedmioty nie będą rosły w dostępnej przestrzeni.
Dodaj flex: 1 do Twoich produktów, co jest równoważne z: flex: 1 1 0, który jest skrótem dla:
flex-grow: 1flex-shrink: 1flex-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 dla odpowiedzi nr 2
Proszę bardzo:
<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>
W celu zwiększenia wzrostu elementów podrzędnych należy dodać jedną z właściwości elastycznych. Oto świetny artykuł o Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/