Dlaczego elementy flex nie zmniejszają poprzedniego rozmiaru zawartości?
Mam 4 kolumny flexbox i wszystko działa dobrze, ale kiedy dodaję tekst do kolumny i ustawiam ją na duży rozmiar czcionki, powoduje to, że kolumna jest szersza niż powinna być ze względu na właściwość flex.
Próbowałem użyć word-break: break-word
i to pomogło, ale mimo to, gdy zmieniam rozmiar kolumny na bardzo małą szerokość, litery w tekście są podzielone na wiele linii (jedna litera na linię), a jednak kolumna nie ma mniejszej szerokości niż jeden rozmiar litery.
Zobacz to video (na początku Pierwsza kolumna jest najmniejsza, ale kiedy zmieniłem rozmiar okna, jest to najszersza kolumna. Po prostu chcę zawsze szanować ustawienia flex; rozmiary flex 1 : 3 : 4 : 4)
Wiem, ustawienie rozmiaru czcionki i wypełnienia kolumn na mniejsze pomoże... ale czy jest jakieś inne rozwiązanie?
Nie mogę używać overflow-x: hidden
.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
2 answers
Automatyczny minimalny rozmiar elementów Flex
Napotkasz domyślne ustawienie flexbox.
element flex nie może być mniejszy niż rozmiar jego zawartości wzdłuż głównej osi.
Domyślne są...
min-width: auto
min-height: auto
...dla elementów flex odpowiednio w kierunku wiersza i kierunku kolumny.
Możesz zastąpić te wartości domyślne, ustawiając elementy flex do:
min-width: 0
min-height: 0
-
overflow: hidden
(lub jakąkolwiek inną wartość, z wyjątkiemvisible
)
Specyfikacja Flexbox
4.5. Automatyczny minimalny rozmiar Flex Pozycje
Aby zapewnić bardziej rozsądny domyślny minimalny rozmiar elementów flex, to Specyfikacja wprowadza nową wartość
auto
jako wartość początkową właściwościmin-width
imin-height
zdefiniowane w CSS 2.1.
W odniesieniu do auto
wartość...
Na elemencie flex, którego
overflow
znajduje sięvisible
w osi głównej, gdy jest określony we właściwości min-size głównej osi flex, określa automatyczny minimalny rozmiar . W przeciwnym razie oblicza się0
.
Innymi słowy:
- wartości domyślne
min-width: auto
imin-height: auto
mają zastosowanie tylko wtedy, gdyoverflow
wynosivisible
. - jeśli wartość
overflow
nie jestvisible
, wartość właściwości min-size wynosi0
. - stąd
overflow: hidden
może być substytutem dlamin-width: 0
imin-height: 0
.
I...
- algorytm minimalnego rozmiaru ma zastosowanie tylko na osi głównej.
- na przykład element flex w kontenerze w kierunku wiersza domyślnie nie otrzymuje
min-height: auto
. - aby uzyskać bardziej szczegółowe wyjaśnienie zobacz ten post:
Zastosowałeś min-width: 0, a element nadal nie psychiatra?
Zagnieżdżone Kontenery Flex
Jeśli masz do czynienia z elementami flex na wielu poziomach struktury HTML, może być konieczne zastąpienie domyślnej min-width: auto
/ min-height: auto
na przedmioty na wyższych poziomach.
Zasadniczo, element flex wyższego poziomu z {[2] } może zapobiec kurczeniu się na elementach zagnieżdżonych poniżej z min-width: 0
.
Przykłady:
- element Flex nie kurczy się mniej niż jego zawartość
- dopasowanie dziecka do rodzic
- właściwość css white-space tworzy problemy z flex
Notatki Renderowania Przeglądarki
-
Chrome vs. Firefox / Edge
Od co najmniej 2017 roku wydaje się, że Chrome albo (1) wraca do
min-width: 0
/min-height: 0
domyślne, lub (2) automatyczne stosowanie domyślnych0
w pewnych sytuacjach opartych na algorytmie tajemnicy. (To może być to, co nazywają interwencja.) W rezultacie wiele osób widzi, że ich układ (szczególnie pożądane paski przewijania) działa zgodnie z oczekiwaniami w Chrome, ale nie w Firefox / Edge. Ten problem jest omówiony bardziej szczegółowo tutaj: flex-shrink rozbieżność między Firefox i Chrome -
IE11
Jak wspomniano w specyfikacji,
auto
wartość dla właściwościmin-width
imin-height
jest "nowa". Oznacza to, że niektóre przeglądarki nadal mogą renderować wartość0
domyślnie, ponieważ zaimplementowały układ flex zanim wartość została zaktualizowana, a ponieważ0
jest wartością początkową dlamin-width
imin-height
WCSS 2.1 . Jedną z takich przeglądarek jest IE11. inne przeglądarki zaktualizowały do nowszej wartościauto
zdefiniowanej w specyfikacji flexbox.
Revised Demo
.container {
display: flex;
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px;
min-width: 0; /* NEW */
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 14:57:28
Okazało się, że to ugryzło mnie wielokrotnie przez lata zarówno dla flex i grid, więc zamierzam zaproponować następujące:
* { min-width: 0; min-height: 0; }
A następnie po prostu użyj min-width: auto
lub min-height: auto
, jeśli potrzebujesz takiego zachowania.
W zasadzie, dorzuć również rozmiar pudełka, aby wszystkie układy były bardziej rozsądne:
* { box-sizing: border-box; min-width: 0; min-height: 0; }
Czy ktoś wie, czy są jakieś dziwne konsekwencje? Nie spotkałem się z niczym od kilku lat z wykorzystaniem mieszanki powyższych. W rzeczywistości nie mogę wymyślić żadnych przypadków, w których chciałbym układać z treści Na zewnątrz do flex / grid, a nie flex / grid do wewnątrz do treści - - - i na pewno, jeśli istnieją, są rzadkie. Więc to jest złe domyślne. Ale może coś przeoczyłem?Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-24 10:36:44