Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

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
What was the problem with using display property for layout purposes?
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)
26
What was a better alternative to using table in the past?
float element (2005 - 2010)
27
Nowadays we only use float for what purpose?
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)
28
How do you add a space in between each column when using flex?
gap ex: gap: 10px;
29
What is the default HTML flow?
Things will continue stacking (either inline, or on top of each other if block) from the top to the bottom of the page.
30
By default, what is flex-direction set to?
row flex-direction: row;
31
When it comes to flex-direction, a tip is to think about what?
the direction the next item is going to be stacked onto the page (left to right, top to bottom?)
32
When you have flex-direction: row, the main-axis and cross-axis are set to what direction?
main-axis: horizontal (left to right) cross-axis: vertical (top to bottom)
33
When you have flex-direction: column, the main-axis and cross-axis are set to what direction?
main-axis: vertical (top to bottom) cross-axis: horizontal (left to right)
34
flex-basis and a number of other properties are flexing along what?
the main-axis
35
What does the flex-basis property do?
Depending on the main-axis direction, it can tweak the width or the height
36
Can flex-basis be applied to a parent container?
No, it can only be applied to the items (child elements)
37
When flex-basis is applied to a container that has flex-direction: column, what is it changing?
the height (of each of the items inside the container)
38
When flex-basis is applied to a container that has flex-direction: row, what is it changing?
the width (of each of the items inside the container)
39
flex-direction directly impacts the direction of what?
the main-axis
40
One of the first things to differentiate between the different properties is asking what 2 questions?
1. Is the property going onto the child (flex item)? 2. Is the property going onto the parent?
41
What is a flex item?
another word for the child item
42
What is a child item?
The individual items contained within the flexible container (the parent is the container holding them)
43
What does the order property do?
sets the order of the child items (can re-arrange specific elements)
44
By default, everything has an order of what number?
0
45
When using "order", when you assign a big number where does that reposition the item?
to the furthest right (lowest number will be on the left) -1 0 4 7 10
46
What is the flex-wrap property used for?
for when you run out of space on the horizontal, tells children how to behave (wrap, nowrap)
47
Does the flex-wrap property target the child or parent?
parent
48
What does "flex-wrap:nowrap" do?
items pushed at the end don't go onto the next line when out of space on that line
49
What happens if you keep adding items on a line with the "nowrap" property?
they will get pushed off the edge and won't be visible anymore
50
As default behavior of Flexbox, the flex-wrap property is set to what?
flex-wrap: nowrap
51
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)
flex-wrap: wrap
52
What is the normal wrap direction that items will stack down to?
from the top-left corner to the bottom-right corner
53
What does "wrap-reverse" do?
flex-wrap: wrap-reverse wraps items but they go from the bottom-right corner to the top-left corner
54
What is the justify-content property?
sets the distribution of our items along the main axis
55
Is the justify-content property set on the child or the parent?
parent container
56
What are the 6 properties we can use with justify-content?
1. flex-start 2. flex-end 3. center 4. space-between 5. space-around 6. space-evenly
57
For us to be able to justify-content, what does there need to be?
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
What is a property used with justify-content that Angela said is a "godsend" of a property?
justify-content: center (easy way of centering items in CSS)
59
justify-content: space-between is usually used on what?
websites so elements take up all available space and is evenly distributed
60
What does the align-items property do?
sets the distribution along the cross-axis
61
Is align-items set on the child or parent?
set on the parent container
62
For align-items to really work, we need to set what?
set the height of the container
63
How do you set the height of a container?
height: #vh
64
What does "vh" stand for? What is it? (2)
viewport height, basically the height of the window you're using to view the page
65
What are 5 properties we can use with align-items?
1. flex-start 2. flex-end 3. center 4. stretch 5. baseline
66
What is the align-self property?
used when you want to align one specific item (separates it from the group)
67
The align-self property is set on the child or the parent?
the child
68
What is the align-content property?
similar to align-items, it specifies how the content should align
69
align-content doesn't work without what?
without setting the flex-wrap to "wrap"
70
When do you use align-items versus align-content?
you use align-content on the content that has moved to multiple lines
71
What is flex-flow?
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
Paragraph elements by default have a default amount of what 2 things?
padding and margin
73
Paragraph elements by default are ___ ___
full width (block elements)
74
Flexbox's default behavior when shrinking the viewport is what?
when it shrinks, it shrinks the flex items (to their minimum content width)
75
What's the Priority List for Flexbox items, in order?
1. min-width/max-width (Most important) 2. flex-basis 3. width 4. content width
76
What determines the minimum content width?
the longest word in that entire line of text
77
What determines the maximum content width?
the longest line of text where it's all on one line
78
What happens when you set the flex items to width: 100px and shrink the container?
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
What takes priority, flex-basis or width?
flex-basis (it ignores any manually set width)
80
If you have a flex-basis of 200px and a max-width of 100px, which one wins?
max-width wins because it's the maximum possible width
81
If you have a flex-basis that's 50px and a max-width of 100px, which one wins?
the flex-basis, it will default to 50px but it will grow to a maximum width of 100px
82
If you have a flex-basis of 200px, and a min-width of 300px, which one wins?
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
How do you turn off the flex, flex-grow, and flex-shrink properties?
set them to "0"
84
In the examples for flex-grow and flex-shrink, what determined the initial starting value for the width of the flex items?
the flex-basis (before the grow and shrink properties come into play)
85
If the flex-basis is set to 100px and flex-grow is on, flex-shrink is off, what happens then in regards to grow?
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
If the flex-basis is set to 100px and flex-grow is on, flex-shrink is off, what happens in regards to shrink?
it reduces down to 100px but won't go any further than that
87
If the flex-basis is 100px, flex-grow is off, flex-shrink is on, what happens when you shrink?
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
What's the default setting/behavior of Flexbox items?
flex-grow: 0; flex-shrink: 1; (flex-shrink is on)
89
What happens if flex-grow and flex-shrink are both on? What happens to the flex-basis? (1)
they take up the max and min space possible and the flex-basis is ignored
90
What is the default for flex-basis?
auto flex-basis: auto;
91
What is "auto" for flex-basis?
it gives more width/flex-basis to the items with more content
92
If you want your flex items to be the same width and flex-basis is set to auto, how do you change it?
turn off flex-basis by setting it to 0 to make all flex items equal width
93
What is the shorthand version of writing our flex-basis, flex-grow, flex-shrink/
flex: 1 1 0; 1 - grow 2 - shrink 3 - basis
94
How do you shorten the shorthand version of 3x flex even further and what does it mean?
flex: 1; (grow of 1, shrink of 1, basis of 0)
95
How do you create containers with responsive ratios?
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
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?
flex: 1;

Complete Web Development - Udemy (9 decks)

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