Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Complete Web Development - Udemy > Section 9 - Flexbox > Flashcards

Section 9 - Flexbox Flashcards

1
Q

When should you only use a table element?

A

when you’re trying to actually create a table

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

When should you not use the table element?

A

to layout the styling of your website

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

position: ____ takes blocks out of the normal flow of HTML and has them floating above the other content

A

position: absolute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How to use float correctly?

A

when you want to float an image to the left or right of a block of text to wrap the text around it

(do not use for layout)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

In summary, how do you use Flexbox?

A

You drop your divs inside a container and then target that container in your CSS and set the display to “flex”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

display: flex is a part of the display: inline, block, inline-block, none system. T or F?

A

False

display: flex is its own, completely different system with a different set of rules

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Different elements by default will have ______

A

different elements by default will have different display values

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

By default, what display value does a div have?

A

it’s going to be a full-width block by default (across the entire page)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

By default, what display value does span have?

A

by default it’s going to be an inline element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What happens to default display values when you enclose all of th elements you want to display inside a flexible container?

A

the default display values get ignored/overridden and Flexbox will lay everything out

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

The width of each of the elements inside the Flexbox will normally be based on the ___ ___

A

content size

(when overriding default display values for elements inside a container)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

When using gap, how do you make the gap static and more responsive? (2)

A

static example - gap: ##px
responsive example - gap: #rem

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What does rem mean again?

A

rem is a unit that is going to adapt based on the top-level size of your content

(is responsive)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What happens when you set a container to display: inline-flex?

A

Similar to inline-block, it allows the Flexbox to occupy as much space as it needs but it means that other things can also go on the same line

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are the 2 versions of creating a flexbox container that we learned?

A

display: flex
display: inline-flex

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Does a flexbox container need to contain all divs?

A

No! It can contain whatever element you want to flex such as list items to create a horizontal nav bar

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How do you get rid of bullet points in a list?

A

add list-style: none to a li element selector section

li {
list-style: none;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What are 2 ways to add numbers to a box model?

A
  1. px
  2. %
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How do you indicate that there are multiple words when using a font-family name

A

use quotation marks around the name

ex: font-family: “Times New Roman”, serif

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Is the table element still used in modern web design?

A

Yes, but only used when you’re actually trying to create a table not use it for positioning (like to show your sales, visitor counts, etc)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What method replaced the table property in terms of web page layout?

A

the display property

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are the 4 options for the display property?

A
  1. display: inline
  2. display: block
  3. display: inline-block
  4. display: none
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Can you set the width/height with display: inline?

A

No, it defaults to the size of their content (HTML)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Can you set the width/height with display: inline-block?

A

Yes, and the elements can go inline with each other as well

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What was the problem with using display property for layout purposes?

A

It’s a painful process to make it a specific style you want and it’s very inflexible (have to keep fiddling the more you add)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What was a better alternative to using table in the past?

A

float element (2005 - 2010)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Nowadays we only use float for what purpose?

A

to float an image to the left or right of a block of text to wrap the text around it

( use flexbox, grid, bootstrap, etc for page structure)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

How do you add a space in between each column when using flex?

A

gap

ex:
gap: 10px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What is the default HTML flow?

A

Things will continue stacking (either inline, or on top of each other if block) from the top to the bottom of the page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

By default, what is flex-direction set to?

A

row

flex-direction: row;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

When it comes to flex-direction, a tip is to think about what?

A

the direction the next item is going to be stacked onto the page (left to right, top to bottom?)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

When you have flex-direction: row, the main-axis and cross-axis are set to what direction?

A

main-axis: horizontal (left to right)
cross-axis: vertical (top to bottom)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

When you have flex-direction: column, the main-axis and cross-axis are set to what direction?

A

main-axis: vertical (top to bottom)
cross-axis: horizontal (left to right)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

flex-basis and a number of other properties are flexing along what?

A

the main-axis

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

What does the flex-basis property do?

A

Depending on the main-axis direction, it can tweak the width or the height

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Can flex-basis be applied to a parent container?

A

No, it can only be applied to the items (child elements)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

When flex-basis is applied to a container that has flex-direction: column, what is it changing?

A

the height (of each of the items inside the container)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

When flex-basis is applied to a container that has flex-direction: row, what is it changing?

A

the width (of each of the items inside the container)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

flex-direction directly impacts the direction of what?

A

the main-axis

40
Q

One of the first things to differentiate between the different properties is asking what 2 questions?

A
  1. Is the property going onto the child (flex item)?
  2. Is the property going onto the parent?
41
Q

What is a flex item?

A

another word for the child item

42
Q

What is a child item?

A

The individual items contained within the flexible container

(the parent is the container holding them)

43
Q

What does the order property do?

A

sets the order of the child items (can re-arrange specific elements)

44
Q

By default, everything has an order of what number?

A

0

45
Q

When using “order”, when you assign a big number where does that reposition the item?

A

to the furthest right

(lowest number will be on the left)

-1 0 4 7 10

46
Q

What is the flex-wrap property used for?

A

for when you run out of space on the horizontal, tells children how to behave (wrap, nowrap)

47
Q

Does the flex-wrap property target the child or parent?

A

parent

48
Q

What does “flex-wrap:nowrap” do?

A

items pushed at the end don’t go onto the next line when out of space on that line

49
Q

What happens if you keep adding items on a line with the “nowrap” property?

A

they will get pushed off the edge and won’t be visible anymore

50
Q

As default behavior of Flexbox, the flex-wrap property is set to what?

A

flex-wrap: nowrap

51
Q

How do you make items continue onto the next line when you run out of space? (they no longer fit in their full minimum width)

A

flex-wrap: wrap

52
Q

What is the normal wrap direction that items will stack down to?

A

from the top-left corner to the bottom-right corner

53
Q

What does “wrap-reverse” do?

A

flex-wrap: wrap-reverse wraps items but they go from the bottom-right corner to the top-left corner

54
Q

What is the justify-content property?

A

sets the distribution of our items along the main axis

55
Q

Is the justify-content property set on the child or the parent?

A

parent container

56
Q

What are the 6 properties we can use with justify-content?

A
  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around
  6. space-evenly
57
Q

For us to be able to justify-content, what does there need to be?

A

Space left for us when all the items are expanded to their maximum width to be able to move the items around the line

58
Q

What is a property used with justify-content that Angela said is a “godsend” of a property?

A

justify-content: center

(easy way of centering items in CSS)

59
Q

justify-content: space-between is usually used on what?

A

websites so elements take up all available space and is evenly distributed

60
Q

What does the align-items property do?

A

sets the distribution along the cross-axis

61
Q

Is align-items set on the child or parent?

A

set on the parent container

62
Q

For align-items to really work, we need to set what?

A

set the height of the container

63
Q

How do you set the height of a container?

A

height: #vh

64
Q

What does “vh” stand for? What is it? (2)

A

viewport height, basically the height of the window you’re using to view the page

65
Q

What are 5 properties we can use with align-items?

A
  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline
66
Q

What is the align-self property?

A

used when you want to align one specific item (separates it from the group)

67
Q

The align-self property is set on the child or the parent?

A

the child

68
Q

What is the align-content property?

A

similar to align-items, it specifies how the content should align

69
Q

align-content doesn’t work without what?

A

without setting the flex-wrap to “wrap”

70
Q

When do you use align-items versus align-content?

A

you use align-content on the content that has moved to multiple lines

71
Q

What is flex-flow?

A

a shorthand combination of flex-direction and flex-wrap. It accepts the value of the two properties separated by space

Example:
flex-flow: column wrap
flex-flow: row wrap

72
Q

Paragraph elements by default have a default amount of what 2 things?

A

padding and margin

73
Q

Paragraph elements by default are ___ ___

A

full width (block elements)

74
Q

Flexbox’s default behavior when shrinking the viewport is what?

A

when it shrinks, it shrinks the flex items (to their minimum content width)

75
Q

What’s the Priority List for Flexbox items, in order?

A
  1. min-width/max-width (Most important)
  2. flex-basis
  3. width
  4. content width
76
Q

What determines the minimum content width?

A

the longest word in that entire line of text

77
Q

What determines the maximum content width?

A

the longest line of text where it’s all on one line

78
Q

What happens when you set the flex items to width: 100px and shrink the container?

A

It will try to honor that width until there’s not enough space left to accommodate it then it will shrink to the min-content width for each item

79
Q

What takes priority, flex-basis or width?

A

flex-basis (it ignores any manually set width)

80
Q

If you have a flex-basis of 200px and a max-width of 100px, which one wins?

A

max-width wins because it’s the maximum possible width

81
Q

If you have a flex-basis that’s 50px and a max-width of 100px, which one wins?

A

the flex-basis, it will default to 50px but it will grow to a maximum width of 100px

82
Q

If you have a flex-basis of 200px, and a min-width of 300px, which one wins?

A

the min-width

(when the min-width is larger than the flex-basis, it respects the min-width and shrinks it down to that size)

83
Q

How do you turn off the flex, flex-grow, and flex-shrink properties?

A

set them to “0”

84
Q

In the examples for flex-grow and flex-shrink, what determined the initial starting value for the width of the flex items?

A

the flex-basis (before the grow and shrink properties come into play)

85
Q

If the flex-basis is set to 100px and flex-grow is on, flex-shrink is off, what happens then in regards to grow?

A

it will try to be 100px wide but because grow is on it’s going to increase the width of each of the items to fill up the container

86
Q

If the flex-basis is set to 100px and flex-grow is on, flex-shrink is off, what happens in regards to shrink?

A

it reduces down to 100px but won’t go any further than that

87
Q

If the flex-basis is 100px, flex-grow is off, flex-shrink is on, what happens when you shrink?

A

it’s not going to grow to fill the space because it’s off, and it’s going to shrink beyond the flex-basis size (100px) until it reaches that minimum (content) width

88
Q

What’s the default setting/behavior of Flexbox items?

A

flex-grow: 0;
flex-shrink: 1;

(flex-shrink is on)

89
Q

What happens if flex-grow and flex-shrink are both on? What happens to the flex-basis? (1)

A

they take up the max and min space possible and the flex-basis is ignored

90
Q

What is the default for flex-basis?

A

auto

flex-basis: auto;

91
Q

What is “auto” for flex-basis?

A

it gives more width/flex-basis to the items with more content

92
Q

If you want your flex items to be the same width and flex-basis is set to auto, how do you change it?

A

turn off flex-basis by setting it to 0 to make all flex items equal width

93
Q

What is the shorthand version of writing our flex-basis, flex-grow, flex-shrink/

A

flex: 1 1 0;

1 - grow
2 - shrink
3 - basis

94
Q

How do you shorten the shorthand version of 3x flex even further and what does it mean?

A

flex: 1;

(grow of 1, shrink of 1, basis of 0)

95
Q

How do you create containers with responsive ratios?

A

flex: 1;
flex: 2;
flex: 3;

The first will be half the size of the blue no matter viewport size, the second will be 2/3 the size of the third, etc

96
Q

What rule can you set on a flexbox container that’s inside a parent container so that each child div is the same is equal in width and are allowed to grow and shrink?

A

flex: 1;

Complete Web Development - Udemy (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions