Properties for Children - Flex-Shrink, Flex-Basis

CSS Flexboxes: Basics Properties for Children
3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€46.60
List Price:  €65.24
You save:  €18.64
£39.85
List Price:  £55.79
You save:  £15.94
CA$68.41
List Price:  CA$95.78
You save:  CA$27.37
A$76.53
List Price:  A$107.15
You save:  A$30.61
S$68.03
List Price:  S$95.25
You save:  S$27.21
HK$390.80
List Price:  HK$547.16
You save:  HK$156.35
CHF 45.55
List Price:  CHF 63.78
You save:  CHF 18.22
NOK kr550.70
List Price:  NOK kr771.03
You save:  NOK kr220.32
DKK kr347.59
List Price:  DKK kr486.66
You save:  DKK kr139.06
NZ$84.03
List Price:  NZ$117.65
You save:  NZ$33.61
د.إ183.60
List Price:  د.إ257.05
You save:  د.إ73.45
৳5,487.36
List Price:  ৳7,682.75
You save:  ৳2,195.38
₹4,170.67
List Price:  ₹5,839.27
You save:  ₹1,668.60
RM238.57
List Price:  RM334.02
You save:  RM95.45
₦66,243.24
List Price:  ₦92,745.84
You save:  ₦26,502.60
₨13,919.64
List Price:  ₨19,488.62
You save:  ₨5,568.97
฿1,852.73
List Price:  ฿2,593.98
You save:  ฿741.24
₺1,618.89
List Price:  ₺2,266.58
You save:  ₺647.68
B$255.86
List Price:  B$358.23
You save:  B$102.36
R934.26
List Price:  R1,308.04
You save:  R373.78
Лв91.20
List Price:  Лв127.69
You save:  Лв36.48
₩68,991.47
List Price:  ₩96,593.58
You save:  ₩27,602.11
₪187.21
List Price:  ₪262.11
You save:  ₪74.89
₱2,883.99
List Price:  ₱4,037.82
You save:  ₱1,153.82
¥7,844.28
List Price:  ¥10,982.62
You save:  ¥3,138.34
MX$849.16
List Price:  MX$1,188.90
You save:  MX$339.73
QR182.39
List Price:  QR255.36
You save:  QR72.97
P685.83
List Price:  P960.21
You save:  P274.38
KSh6,625.24
List Price:  KSh9,275.87
You save:  KSh2,650.62
E£2,395.76
List Price:  E£3,354.25
You save:  E£958.49
ብር2,870.01
List Price:  ብር4,018.25
You save:  ብር1,148.23
Kz41,742.64
List Price:  Kz58,443.04
You save:  Kz16,700.40
CLP$47,160.37
List Price:  CLP$66,028.30
You save:  CLP$18,867.92
CN¥361.90
List Price:  CN¥506.69
You save:  CN¥144.79
RD$2,925.21
List Price:  RD$4,095.54
You save:  RD$1,170.32
DA6,709.48
List Price:  DA9,393.81
You save:  DA2,684.33
FJ$113.15
List Price:  FJ$158.42
You save:  FJ$45.27
Q388.57
List Price:  Q544.03
You save:  Q155.46
GY$10,460.61
List Price:  GY$14,645.70
You save:  GY$4,185.08
ISK kr7,004.59
List Price:  ISK kr9,806.99
You save:  ISK kr2,802.40
DH506.05
List Price:  DH708.51
You save:  DH202.46
L882.28
List Price:  L1,235.26
You save:  L352.98
ден2,874.42
List Price:  ден4,024.43
You save:  ден1,150
MOP$403.10
List Price:  MOP$564.37
You save:  MOP$161.27
N$937.41
List Price:  N$1,312.44
You save:  N$375.03
C$1,849.89
List Price:  C$2,589.99
You save:  C$740.10
रु6,678.31
List Price:  रु9,350.18
You save:  रु2,671.86
S/187.13
List Price:  S/262
You save:  S/74.86
K190.39
List Price:  K266.57
You save:  K76.17
SAR187.48
List Price:  SAR262.49
You save:  SAR75.01
ZK1,332.51
List Price:  ZK1,865.62
You save:  ZK533.11
L231.86
List Price:  L324.62
You save:  L92.76
Kč1,172.97
List Price:  Kč1,642.25
You save:  Kč469.28
Ft18,205.74
List Price:  Ft25,489.50
You save:  Ft7,283.75
SEK kr547.93
List Price:  SEK kr767.15
You save:  SEK kr219.21
ARS$43,829.95
List Price:  ARS$61,365.44
You save:  ARS$17,535.49
Bs346.26
List Price:  Bs484.79
You save:  Bs138.53
COP$194,628.58
List Price:  COP$272,495.59
You save:  COP$77,867
₡25,090.62
List Price:  ₡35,128.88
You save:  ₡10,038.25
L1,234.87
List Price:  L1,728.92
You save:  L494.05
₲372,339.59
List Price:  ₲521,305.22
You save:  ₲148,965.63
$U1,915.65
List Price:  $U2,682.06
You save:  $U766.41
zł201.49
List Price:  zł282.11
You save:  zł80.61
Already have an account? Log In

Transcript

All right. At this lesson, we'll do extreme and flex basis properties later. On flex items section define an ability for an item to shrink necessary. false value is one, negative numbers are invalid. So just imagine some case when you run websites on your phone and you change it from landscape supported models. Your website should change sizes, all those are elements.

By default, this is our selection block section. So if it's container size, go naked less. Your items will align sizes If you want to adjust this, you can set the action to zero so your items wouldn't stream on changes related. So we'll take some more time on our practice example. I'll show you our top section. Okay, our next flex basis defines default size soften elements before the remaining space is submitted.

It's been the keywords lengthy of like 20 person page 160 pixels or five or M or it can be set to outsell or concepts. So outsell means it's looks only on This property actually when you set off so it will. So also all your free space submitted on that zero budget. It's just that constant size of items will be basis only by size of contents inside the problem of contents key words that it's not great to add support to check now, so be aware about it. And before that box mother was making same logic was very hot. And you can manipulate on the by adding some classes, add an additional CSS rules and it was hard to know.

But right now it's simple this use case description for this lesson

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.