Witam , potrzebuję wskazówki jak zapisać w CSS, aby 3 elementy zajmowały równo po 1/3 szerokości.
Wpisując wartość 33% pozostanie 1%.
Zatem co zapisać w kodzie , aby łącznie było wykorzystane 100% szerokości i nie pozostał żaden wolny piskel.
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-grow
Dając wszystkim divom style="flex-grow: 1"
masz równe części, zmieniając wartość możesz osiągać różne proporcje, spróbuj ;)
czysteskarpety napisał(a):
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-grow
Dając wszystkim divom
style="flex-grow: 1"
masz równe części, zmieniając wartość możesz osiągać różne proporcje, spróbuj ;)
jak dokładnie tego użyć ? Po prostu dopisać to polecenie do każdego z tych 3 div'ów - zmieniać wartości i obserwować co się dzieje?
viGor napisał(a):
jak dokładnie tego użyć ? Po prostu dopisać to polecenie do każdego z tych 3 div'ów - zmieniać wartości i obserwować co się dzieje?
html:
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
css:
.container {
width: 100%;
display: flex;
}
.child {
flex-grow: 1;
}
https://jsfiddle.net/kvbsx2mc/
Można też to zrobić za pomocą css grid. Jednak nie działa to w Internet Explorerze (niech ginie). Ale daje trochę większe możliwości i przynajmniej dla mnie - jest bardziej przejrzyste. Nigdy nie mogłem sprawić by flex-grow flex-basis flex-shrink działały tak jak chce. A z gridem wszystko jest proste.
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}