Practice Lesson - Justify-Content Part 2

CSS Flexboxes: Basics Introduction, Parent Properties
2 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, I sent you on air and this is our video related to practice and today I'll show you a good example about how to fight constant force. I wish to have a few practices since about justify ends this video will be very simple but I really like this example because it's actually show how easily you can manipulate items on flex container. So we have flex container. And is this our list and list items are actually our guess items and this service here and let's close our URL. So it will change size of our screen. You'll see how items go into the next and next lines and CSS for flex item, actually not very often in just for this example and justify content space around.

So let's draw this window a bit and to see how strange a bit but it's actually space around work so we change size and when our six items cannot fit the first one, he just bought his next slide. But while it's only one item wants a second line search Should we get spacing from the left and triads. We'll change it to beat him and tried now, fifth item will go to the second line and the second Susie asked airspace Yeah. Okay, we'll try that again. And next item, I actually go to the second line. And right now we have three columns of items.

And you can see the orders here are changed again. And right now we'll have sublime. So each one have on the two items, and this is our layout. We can actually change it like more more challenging, but it's all just go to the flex direction. Cool. Hey, I sent it's an office example this time Bye bye.

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.