Elementy w giętkim pojemniku nie owijają się.

Question

Kiedy próbuję wstawiać elementy blokowe do elastycznego pojemnika, wszystkie pozostają na tej samej linii, co gdyby były blokami w linii.

Chciałbym, aby dwa pierwsze elementy div były na tej samej linii, a ostatnie były w drugiej linii. Niestety, to nie działa.

Ktoś ma jakiś pomysł?

<div style="display: flex"> 
 
    <div style="display: inline-block"> 
 
    This is an inline block element 
 
    </div> 
 
    <div style="display: inline-block"> 
 
    This is an inline block element 
 
    </div> 
 
    <div style="display: block"> 
 
    This is a block element 
 
    </div> 
 
</div>

Answer 1

Początkowe ustawienie flex pojemnika jest flex-wrap: nowrap. Oznacza to, że elementy elastyczne są zmuszone pozostać w jednej linii.

Można zastąpić wartość domyślną za pomocą flex-wrap: wrap.

Wartość elementów flex jest ignorowana w układzie flex.

---

giętki pojemnik, który jest elementem o display: flex lub display: inline-flex ustanawia flex formatting context. Chociaż podobne do block formatting context, istnieją różnice.

Jedna różnica polega na tym, że dzieci kontenera flex ignorują własność display.

Kolejna różnica polega na tym, że w pojemniku elastycznym marginesy nie zapadają się, a właściwości float i clear nie mają wpływu.

Elastyczny pojemnik ma również kilka domyślnych ustawień.Wśród nich:

• justify-content: flex-start - Flex rzeczy układać na początku linii
• flex-shrink: 1 - Flex przedmioty mogą się kurczyć i nie przepełnić pojemnika
• align-items: stretch - Flex przedmioty będą rozszerzać na pokrycie cross-wielkość pojemnika
• flex-direction: row - Flex rzeczy wyrównać poziomo
• flex-wrap: nowrap - Flex elementy są zmuszeni do pozostania w jednej linii

Zwróć uwagę na dwie ostatnie pozycje.

Elementy wygięte zostaną wyrównane w rzędzie i nie będą się zawijać.

Jeśli chcesz mieć dwa elementy elastyczne w pierwszym wierszu i trzeci element w drugim wierszu, pozostaw kontener wieloliniowy z flex-wrap: wrap.

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.box { 
 
    flex: 0 0 45%; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background-color: lightgreen; 
 
    border: 1px solid #ccc; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Ponadto, jeśli chcesz Flex pojemniki do wyświetlania inline użyć display: inline-flex nie display: flex. Są one porównywalne z display: inline-block i display: block.

Answer 2

• zastosowanie flex-wrap:wrap w jednostce ponieważ domyślnie flex-wrap jest nowrap

• zastosowanie flex-basis:50% u dziecka, aby podzielić oba elementy wbudowane-blokiem w tym samym rozmiarze.

Zobacz więcej szczegółowych informacji na temat schematu flexbox na temat tego artykułu: A Complete Guide to Flexbox

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap 
 
} 
 
.flex div { 
 
    flex: 0 50%; /*change to 1 50% to see the difference */ 
 
    border: 1px solid black; 
 
    padding: 10px 
 
}

<div class="flex"> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is a block element 
 
    </div> 
 
</div>