Unitatea fr
Unitatea de flexibilitate fr
reprezintă o parte sau fracțiune din
dimensiunea totală a spațiului în care se află elementul.
Avantajul utilizării
fr este adaptabilitatea sa la
diferite containere sau rezoluții de ecran,
deoarece fr distribuie simplu întregul spațiu în numărul indicat
de fracțiuni (părți) fără a fi legat de dimensiunea lor exactă
în pixeli.
Exemplu
Să folosim proprietatea
grid-template-columns
pentru a face ca prima și a doua
coloană a grid-ului să ocupe o parte a containerului,
iar a treia coloană - trei părți:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Exemplu
Valorile specificate în unități fr
pot lua forme fracționale. Să
modificăm exemplul anterior, specificând
pentru a doua și a treia coloană lățimea
în numere fracționale:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Vezi și
-
unitatea
px,
care stabilește dimensiunea în pixeli -
unitatea
em,
care stabilește dimensiunea în em -
unitatea
rem,
care stabilește dimensiunea în rem -
unitatea
%,
care stabilește dimensiunea în procente -
unitatea
vw,
care stabilește dimensiunea în vw -
unitatea
vh,
care stabilește dimensiunea în vh -
unitatea
vmax,
care stabilește dimensiunea în vmax -
unitatea
vmin,
care stabilește dimensiunea în vmin