CSS Flexbox. Proprietatea flex-shrink. Valoarea flex-shrink. Proprietatea flex-basis.

Proprietatea flex-shrink

Proprietatea flex-shrink specifică cât de mult se va micsora un element flex în raport cu restul elementelor flex.



Valoarea flex-shrink trebuie să fie un număr, valoarea implicită este 1.

Exemplu:

Nu lăsați al treilea element flex să se micșoreze la fel de mult decât celelalte elemente flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Proprietatea flex-basis

Proprietatea flex-basis specifică lungimea inițială a unui element flex.



Exemplu:

Setați lungimea inițială a celui de-al treilea element flex la 200 de pixeli:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>