Parent Properties - Display, Flex-Direction, Flex-Wrap, Flex-Flow

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

Okay, we'll start our journey from learning approaches related to actually, monster human selective access simulation, and I hope you'll be able to use it during learning. Let's model. Okay, so let's mock something I actually have seven man properties. So display, flex directions, flex, Rob. Let's flow justify contents, align items and align the stuff from display and display. It's one of the major schools because it's actually defined, then it's official you can on all all Xbox To display more than just a few wireless mods that shouldn't flex and flex flex defines how to pack into line will display each side some insert new line, but it's a bit tricky because so remember that as their own direction so for default Satan from the folder action items into one box, it will change the direction our line will began and calm and all.

So you should remember oh yes directions directions extra It defines how our items will be displayed in salsas box, and clicks directions. manipulate the main axis and our core values and so is our default. items will be displayed from left to right. Reverse instead will display items from the left column is similar to all bots. It's displaying items from top to bottom and only display items on bottom to the top. There are also examples so this part is for row value is all related to This is related so on, and so called few examples, and I'll show them a bit later because they wanted to power some other with that example with that selection example.

Our next rule is and three rock rock operators. That's Rob defines how all your items will not fit into one line. So for example, if your items have somebody more this Or container, this items can be still appears in the slide or move to the next slide. And so, this actually can be manipulated by different types. So if you said no Rob and this section or items, no, they're all this all into one line. And when you set that properly, it will give you ability to move items into next time.

And so, all your items will go from top left corner into bottom right corner. But if you use proper yours items you will be able to split into two lines but order will start from Bottom line, so seconds long with numbers like second line item, then we'll go into our first line and display next to the chicken bar to get on is this actual example of it, and practice. So let's go because this actually short version of two major styles, and so it's so let's go. So next direction, on second on both sides in this wall Okay thank you for your 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.