Brainscape's Knowledge GenomeTM

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


See full index

Dev > What The Flexbox? > Flashcards

What The Flexbox? Flashcards

Flexbox Basics

1
Q

How do you start writing in Flexbox within CSS?

A

Simply define a container element as display: flex within your CSS - automatically any children elements will become flex items

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

What is the difference between display: inline-flex and display: flex?

A

display: inline-flex will make the container element as wide as its children need, whereas display: flex will default to 100 and have its width independent of the combined width of its children

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

What does the CSS property flex-direction do?

A

It sets the main axis, and thus, also the cross axis for flexbox.

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

When doing directional css - whether it is align-items or justify-content - what does it rely on in order to determine which direction to apply it?

A

The primary axis and the cross axis, as set by the flex-direction property.

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

What is the default property for flex-direction?

A

row

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

What are the four possible values for the flex-direction property?

A

row, column, row-reverse, column-reverse

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

What happens if you give flex-box items a width that exceeds the width of the screen?

A

It will evenly distribute the width throughout the children - or using the ‘flex’ property you can assign more or less space to some.

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

What do you apply the ‘flex-wrap’ property to?

A

The container - not the flex items

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

What is the default of the flex-wrap property?

A

nowrap

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

What is the difference if we set the flex-wrap property to a value or ‘wrap’?

A

The widths we have assigned now matter - if they are more than the width of the screen, it will output as many as can fit, and then wrap to the next line. The browser will determine how many rows to have and distribute the highet evenly between them.

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

What happens if we set the flex-wrap property to ‘wrap-reverse’?

A

The flex-items will be displayed in reverse of the cross-axis (so if set to default, it will display your last items at the top, and first items at the bottom)

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

Is margin part of the box-model?

A

No, so if you have a margin, and a width that is more than the width of the screen, it will break and either wrap or just distribute the widths evenly.

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

How can you get around the fact that margin is not part of the box-model?

A

You can set your widths using calc. For instance, something like ‘ width: calc(33.3333% - 20px) will account for a 10px margin all around, and calculate how much width to take off to allow all the items to appear on one line.

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

Are padding and border part of the box model?

A

Yes, so they will be included within whatever width you have set for an item - unlike margin.

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

What does the flexbox property of ‘order’ allow you to do?

A

With it, you can move the order of your DOM elements without actually moving them within the DOM

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

What is the default order for a flex-item if it isn’t set?

A

0 - so if you set anything to something greater than 0, it will be placed at the end of the main axis.

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

What’s a prime example of where you may want to use the flexbox: order property?

A

When you have content that needs to be re-positioned within a mobile layout - for instance, if some content needs to be moved to the footer.

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

What happens if we give a negative value to the order property?

A

This also works - just like z-index. It will move the flex item ahead of all the others to the front of the main axis.

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

What’s the weird gotcha of the flexbox order property?

A

When you go to select with your cursor, as if to copy and paste - it will still follow the order the elements were originally in - not the order they are displayed in. This will make copy and pasting a headache.

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

What is the justify-content property that can be set on a flex container?

A

It tells us how the items are aligned along the main axis.

21
Q

What options does justify-content take?

A 
flex-start
flex-end
center
space-between
space-around
22
Q

What is the difference between the space-between and space-around values for the justify-content property?

A

space-around will add half of an equal margin to both the left and right sides.

23
Q

If I change my flex-direction to column - why does it now ignore whatever I have set as the justify-content?

A

More than likely because you do not have a height on your element. it can’t work without a specified height. Otherwise, it may be that the height is more than the full height of the screen, in which case, flexbox also can’t work its distributional magic.

24
Q

How does align-items align things?

A

It works by aligning items along the cross axis.

25
Q

When you vertically center items, what is crucial to remember?

A

That your container must have a height, or it has nothing to do the computation off of.

26
Q

What is align-items set to by default?

A

stretch - which will start your items at the top of the container and stretch them all the way to the bottom.

27
Q

What properties does align-items take?

A

stretch, center, flex-start, flex-end and baseline

28
Q

What does the baseline value for align-items do?

A

It will center your items by aligning them based off of the text within - making sure that the bottom of each text is even all the way across.

29
Q

How does align-content differ from justify-content?

A

Justify content looks at what happens to the extra space on the main axis, align-content looks at the extra space on the cross axis.

30
Q

What is necessary for align-content to work?

A

There must be some sort of wrap. You must have multiple lines, which the align-content property can then position within the container.

31
Q

What is the default value of align-content?

A

stretch

32
Q

What values does align-content take?

A

flex-start, flex-end, space-between, space-around, center, stretch

33
Q

What does using justify-content center along with align-content center do?

A

It will center all the items horizontally as well as vertically.

34
Q

What does the align-self property do?

A

It overwrites the container-level alignment for just the single item which it is applied directly to.

35
Q

Which values can be used on the align-self property?

A

All the same ones as align-content: center, baseline, flex-start, flex-end, stretch

36
Q

Where do we place the flex property?

A

On individual flex items, as opposed to on the container.

37
Q

What question does the flex property answer?

A

What do I do with the extra space or, what do I do when I don’t have enough space?

38
Q

What is the width of a flex item by default?

A

Auto - it will just have the same width as the content within it.

39
Q

What happens if we set flex: 1 for all items

A

Then all items will take up the exact same amount of space.

40
Q

What does the flex property determine?

A

At what proportion should flex items be scaled up or down if we have too much space, or not enough space.

41
Q

If all items are set to flex 1 originally, what will setting an individual item to flex: 2 do?

A

Give that item twice the width of all the others - whcih will remain true no matter the view size.

42
Q

How does the flex property work?

A

Off of proportion - not off of pixels or percentages.

43
Q

What are the three properties inherent in something like flex: 1

A

flex-grow, flex-shrink, flex-basis

44
Q

What is the flex-grow property?

A

When there is extra space, how should we divide it among every item on the same line?

45
Q

What is the flex-shrink property?

A

When there isn’t enough space, how should we divvy up what space there is among every item on the line.

46
Q

What is the flex-basis property?

A

If the world was ideal, how big should this element be?

47
Q

What is the default value for flex-grow?

A

0 - if you have extra room, leave it alone, don’t do anything.

48
Q

What is the default of flex-shrink?

A

1 - so, if there isn’t enough space, evenly divide how much to trim off among each element in the row.

49
Q

What is the shorthand for setting the flex-grow, flex-shrink and flex-basis properties?

A

flex: 10 5 400px

Dev (2 decks)

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