Запіс на курсы па HTML, CSS, JavaScript, PHP, Python, фрэймворкам і CMS,
а таксама: дапамога ў пошуку працы і заказаў, стажыроўка на рэальных праектах→
206 of 313 menu

Уласцівасць flex

Уласцівасць flex з'яўляецца скарачэннем для flex-basis, flex-shrink і flex-grow.

Ужываецца да: канкрэтнага flex блока.

Парадак значэнняў не мае значэння. Другі і трэці параметры (flex-shrink, flex-basis) не з'яўляюцца абавязковымі.

Значэнні

Гл. адпаведныя ўласцівасці.

Значэнне па змаўчанні: 0 1 auto.

Прыклад

Хай у нас ёсць 3 элементы. Шырыня кожнага з іх складае 200px і сумарна роўная 600px, што больш за шырыню бацькоўскага кантэйнера, якая роўная 300px. Давайце назначым для першага элемента шырыню 200px, для другога элемента - 300px, для трэцяга элемента - 100px. У ўсіх элементаў хай значэнне flex-basis будзе роўнае 1, а flex-shrink - 1, 2, 3 у адпаведнасці з парадкавым нумарам элемента:

<div class="parent"> <div class="child elem1">1</div> <div class="child elem2">2</div> <div class="child elem2">3</div> </div> .parent { display: flex; width: 350px; height: 200px; border: 1px solid red; } .child { width: 200px; height: 50px; border: 1px solid green; } .elem1 { flex: 200px 1 1; } .elem2 { flex: 300px 1 2; } .elem3 { flex: 100px 1 3; }

:

Глядзіце таксама

  • уласцівасць flex-direction,
    якое задае кірунак восяў flex блокаў
  • уласцівасць justify-content,
    якое задае выраўноўванне па галоўнай восі
  • уласцівасць align-items,
    якое задае выраўноўванне па папярочнай восі
  • уласцівасць flex-wrap,
    якое задае шматрадковасць flex блокаў
  • уласцівасць flex-flow,
    скарачэнне для flex-direction і flex-wrap
  • уласцівасць order,
    якое задае парадак flex блокаў
  • уласцівасць align-self,
    якое задае выраўноўванне аднаго блока
  • уласцівасць flex-basis,
    якое задае памер канкрэтнага flex блока
  • уласцівасць flex-grow,
    якое задае прагавітасць flex блокаў
  • уласцівасць flex-shrink,
    якое задае сціскальнасць flex блокаў
byenru