/ / Flexbox div nemá celú šírku - html, css, css3, flexbox

Flexbox div nerobí celú šírku - html, css, css3, flexbox

Snažím sa pochopiť, ako display:flex funguje, ale vždy, keď ho nastavím, dieťa nerobí celú šírku, očakával som, že tri divízie získajú 33% šírky obrazovky.

.flexbox {
display: flex;
}

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

odpovede:

3 pre odpoveď č. 1

Musíte povedať, aby sa položky flex rozšírili. V predvolenom nastavení nevyužívajú voľný priestor.

Počiatočné nastavenie flex-basis je auto, čo znamená, že položky majú veľkosť ich obsahu.

Počiatočné nastavenie flex-grow je 0, čo znamená, že položky sa nebudú rozširovať v dostupnom priestore.

pridať flex: 1 na svoje položky, čo zodpovedá: flex: 1 1 0, čo je skratka pre:

  • 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 pre odpoveď č. 2

Nech sa páči:

<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>

Aby sa elementy dieťaťa rozrástli, budete musieť pridať jednu z vlastností flexu. Tu je skvelý článok o flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/