Practice Lesson - Justify-Content Part 1

CSS Flexboxes: Basics Introduction, Parent Properties
6 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.84
List Price:  €65.59
You save:  €18.74
£40.02
List Price:  £56.03
You save:  £16.01
CA$68.85
List Price:  CA$96.39
You save:  CA$27.54
A$77.12
List Price:  A$107.98
You save:  A$30.85
S$68.21
List Price:  S$95.50
You save:  S$27.29
HK$391.10
List Price:  HK$547.57
You save:  HK$156.47
CHF 46.02
List Price:  CHF 64.43
You save:  CHF 18.41
NOK kr554.84
List Price:  NOK kr776.82
You save:  NOK kr221.98
DKK kr349.42
List Price:  DKK kr489.21
You save:  DKK kr139.79
NZ$84.86
List Price:  NZ$118.81
You save:  NZ$33.95
د.إ183.60
List Price:  د.إ257.06
You save:  د.إ73.45
৳5,520.52
List Price:  ৳7,729.18
You save:  ৳2,208.65
₹4,173.28
List Price:  ₹5,842.93
You save:  ₹1,669.64
RM238.32
List Price:  RM333.67
You save:  RM95.35
₦66,243.24
List Price:  ₦92,745.84
You save:  ₦26,502.60
₨13,999.18
List Price:  ₨19,599.98
You save:  ₨5,600.79
฿1,857.12
List Price:  ฿2,600.12
You save:  ฿743
₺1,622.27
List Price:  ₺2,271.31
You save:  ₺649.04
B$259.73
List Price:  B$363.64
You save:  B$103.91
R934.43
List Price:  R1,308.28
You save:  R373.84
Лв91.63
List Price:  Лв128.30
You save:  Лв36.66
₩69,279.33
List Price:  ₩96,996.60
You save:  ₩27,717.27
₪186.71
List Price:  ₪261.41
You save:  ₪74.69
₱2,889.54
List Price:  ₱4,045.59
You save:  ₱1,156.04
¥7,894.37
List Price:  ¥11,052.75
You save:  ¥3,158.38
MX$855.53
List Price:  MX$1,197.81
You save:  MX$342.28
QR183.78
List Price:  QR257.31
You save:  QR73.52
P714.32
List Price:  P1,000.11
You save:  P285.78
KSh6,668.17
List Price:  KSh9,335.98
You save:  KSh2,667.80
E£2,392.69
List Price:  E£3,349.95
You save:  E£957.26
ብር2,866.71
List Price:  ብር4,013.63
You save:  ብር1,146.91
Kz41,718.65
List Price:  Kz58,409.45
You save:  Kz16,690.80
CLP$48,067.30
List Price:  CLP$67,298.07
You save:  CLP$19,230.76
CN¥361.97
List Price:  CN¥506.79
You save:  CN¥144.82
RD$2,943.98
List Price:  RD$4,121.81
You save:  RD$1,177.82
DA6,730.95
List Price:  DA9,423.87
You save:  DA2,692.92
FJ$114.25
List Price:  FJ$159.96
You save:  FJ$45.71
Q390.96
List Price:  Q547.38
You save:  Q156.41
GY$10,529.51
List Price:  GY$14,742.16
You save:  GY$4,212.64
ISK kr7,023.09
List Price:  ISK kr9,832.89
You save:  ISK kr2,809.80
DH508.71
List Price:  DH712.24
You save:  DH203.52
L887.81
List Price:  L1,243.01
You save:  L355.19
ден2,890.32
List Price:  ден4,046.68
You save:  ден1,156.36
MOP$402.89
List Price:  MOP$564.08
You save:  MOP$161.19
N$939.91
List Price:  N$1,315.96
You save:  N$376.04
C$1,851.58
List Price:  C$2,592.36
You save:  C$740.78
रु6,678.15
List Price:  रु9,349.94
You save:  रु2,671.79
S/188.35
List Price:  S/263.70
You save:  S/75.35
K194.24
List Price:  K271.96
You save:  K77.71
SAR187.48
List Price:  SAR262.49
You save:  SAR75
ZK1,347.15
List Price:  ZK1,886.12
You save:  ZK538.96
L233.12
List Price:  L326.39
You save:  L93.26
Kč1,178.64
List Price:  Kč1,650.20
You save:  Kč471.55
Ft18,305.53
List Price:  Ft25,629.21
You save:  Ft7,323.68
SEK kr550.47
List Price:  SEK kr770.71
You save:  SEK kr220.23
ARS$44,067.56
List Price:  ARS$61,698.11
You save:  ARS$17,630.55
Bs347.73
List Price:  Bs486.86
You save:  Bs139.12
COP$193,896.94
List Price:  COP$271,471.23
You save:  COP$77,574.29
₡25,583.92
List Price:  ₡35,819.54
You save:  ₡10,235.61
L1,243.01
List Price:  L1,740.31
You save:  L497.30
₲375,896.46
List Price:  ₲526,285.13
You save:  ₲150,388.66
$U1,928.40
List Price:  $U2,699.91
You save:  $U771.51
zł203.42
List Price:  zł284.80
You save:  zł81.38
Already have an account? Log In

Transcript

All right, let's continue. So as assessing the next property related so we'll start from just to justify content is very important. And so this will help you to manipulate the box items and items amongst its list cell flex parts, and center space between space and space. Let's start setting goals for multiple items. items will go from left to right Let's end will pack all your items going from the end of the line. So the items show go from the right to the left center will center all your items with free space basa size, space between items are evenly distributed into line and first item will go.

There's a starting point and last item space is a bit tricky but our items are evenly distributed in the line use equal space on both sides. And it will look a bit strange, but just imagine you have a first item on land and it's fair threes base unit before It's also fair free space unit after, but both have also, second free space units related to second item. So between last item and second, it will have two full space units. It's maybe hard to understand, but you will see it's values trying to fit around actually, atoms are distributed by some moral space in between any two items, is equal to and so, as you can see with that black spot example, that's our second example is our example between our first example and Based on our example, we'll also tell a practice related to justify content. Maybe a few, Bob, so let's go to the next.

And Nexus. So let's enter our items and justify content. items with binds into main axis line items connected to cross stock to the bottom or the fall direction. Along items as firefighters waves right, let's start yes baseline. So, I will define how items will go from the top starting points or cross axis, let's enter defines how items displayed on the bottom off process. center centers as cost baseline items in the alignment.

So, contents will match the contents of all items. One by side and straight shades are all items that fell in line. Not not so important once hides it will stretch them so that each item will start from the beginning Cross access, and we'll finish as modern off processes. But yeah, please note that says still respect me. And let's go and see an example. Again cross access or defaults or direction from top to the bottom.

So that's that. That's that center it axis. This line, as you can see is a pair of different spacing before. But all this means is the same baseline and stretches actually all items from top to the bottom Yeah, we'll also practice lesson related so learn more about it.

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.