Brainscape's Knowledge GenomeTM

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


See full index

HTML/CSS > Layouts: Floats, Flexbox, CSS > Flashcards

Layouts: Floats, Flexbox, CSS Flashcards

1
Q

Page Layout vs. Component Layout

A

Page Layout:
Laying out elements - big pieces of content

Component layout:
The components themselves need to have some sort of layout as well

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

What is considered the old way of building layouts? And what are its characteristics?

A

Float layouts. Uses the float CSS property. However it is getting outdated fast.

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

What is a modern way of laying out elements in a 1-dimensional row without using floats? What is it perfect for?

A

Flexbox. Perfect for component layouts.

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

Used for laying out element in a fully-fledged 2-dimensional grid. What is it perfect for?

A

CSS Grid. Perfect for page layouts and complex components

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

What is Flexbox used for?

A

Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts.

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

What is CSS Grid used for?

A

Laying out element in a fully-fledged 2-dimensional grid. Perfect for page layouts and complex components

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

What will CSS property float do?

A

Makes the content inline, so that the other content will float around it.

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

How to easily write fake text

A

Write lorem in html files and you can select it from there

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

Easily move a line up or down

A

Alt + arrow

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

What happens with the heigth when there’s two child floats in a component?

A

The element’s height will collapse. The only reason why it still has any body is because of the padding that is set.

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

What to do when one floating element is not offsetting from the other?

A

Make both elements floating. Make second one float either left or right

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

Can floats still have a bit of margin around them

A

Yes

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

What is a similarity between absolute positioning and floats?

A

Elemens is removed from the normal flow: “out of flow”

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

How do absolute positioning and floats differ?

A

With absolute positioning there’s no impact on surrounding elements (might overlap them)

With floats text and inline elements will wrap around the floated element

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

Will the container adjust to the height of the float element?

A

No this will not happen. That is the whole reason why height collapses.

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

Solve collapsing height due to floats

A

Add empty div with class name “clear”. In CSS set:

.clear{
clear: both;
}

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

Explain the use of ‘clearfix’ method

A

In order to avoid having to write a lot empty divs, use this pseudo class to artificially create empty content:

.clearfix::after{
clear:both;
content:””;
display: block;
}

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

How to break a float?

A

footer{
clear:both;
}

When not doing this, the next element (footer in this case) will take the width of the previous element.

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

What does box sizing do?

A

It will consider the border + padding as part of the width and height instead of being an extra to the width and heigth, hence box model

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

Box sizing property CSS?

A

box-sizing: border-box

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

What is the difference between content-box and border-box?

A

content-box gives you the default CSS box-sizing behavior. Any border or padding will be added to the final rendered width, making the element wider than the set width.

With border-box, if you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

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

What to do when wanting to apply border box to all elements

A

*{
box-sizing: border-box
}

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

How is the clearfix method used?

A

Use is as class name in the container:
It will then create empty content after the last element of that container

div class=”container clearfix”

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

How to tell the container to use the flex rules?

A

display: flex

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

Flexbox: Create space between items

A

gap: 10px

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

Flexbox: Align items along main axis (top, center, bottom)

A

justify-content: flex-start / flex-end / center

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

Flexbox: Align items along cross axis (left, center, right)

A

align-items: flex-start / flex-end / center / stretch

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

Flexbox: overwrite align-items for individual flex items

A

align-self: auto / stretch / flex-start / flex-end

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

Flexbox: Evenly spread out space between the elements

A

justify-content: space-between

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

Change order of elements & How to rank?

A

.el–5{
order: 1;
}

.el–4{
order: 2;
}

.el–6{
order: -1;
}

Order from low to high

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

Advantage of gap over margin-right

A

Advantage of gap is that you don’t need to remove the margin of the last element. It’s all between the elements.

32
Q

Hence this code:

.related-link:link{
font-size: 17px;
font-weight: bold;
font-style: normal;
margin-bottom: 5px;
}

Why does the margin-bottom not work? And how to resolve?

A

It’s an Inline element.

Add display:block

.related-link:link{
font-size: 17px;
font-weight: bold;
font-style: normal;
margin-bottom: 5px;
display: block;
}

33
Q

Hence this code:

aside{
flex: 300px;
}

The aside component is not updating. How could that be and how to resolve?

A

Shrinking could be set to 1, which means yes

Set it to 0:

aside{
flex-basis: 300px;
flex-shrink: 0;
flex-grow: 0;
}

34
Q

How would you write this in short? And what is the order?

aside{
flex-basis: 300px;
flex-shrink: 0;
flex-grow: 0;
}

A

aside{
flex: 0 0 300px;
}

flex-grow, flex-shrink, flex-basis

35
Q

Given that you want an article element and an aside element next to each other with a total width of 1200, the aside being 300px and a gap of 75px. How would you set this up while using flex code?

A

First make a container for the aside and the article. Then write something like:

.row{
display:flex;
gap: 75px;
}

article{
flex: 0 0 825px;
}

aside{
flex: 0 0 300px;
}

36
Q

Hence the following code:

.row{
display:flex;
gap: 75px;
}

article{
flex: 0 0 825px;
}

aside{
flex: 0 0 300px;
}

If the container of all these elements has been set to 1200, how could this be written any shorter?

A

.row{
display:flex;
gap: 75px;
}

article{
flex: 1;
}

aside{
flex: 0 0 300px;
}

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. Flex can also be 2 for example, it will then be twice the size

37
Q

Hence the following code:

.row{
display:flex;
gap: 75px;
}

article{
flex: 1;
}

aside{
flex: 0 0 300px;
}

The article and aside align on the bottom. The article takes up as much space as it needs but the aside just simply follows. What would you add so that they don’t line up at the bottom but just take the space they both need?

A

.row{
display:flex;
align-items: flex-start;
gap: 75px;
}

article{
flex: 1;
}

aside{
flex: 0 0 300px;
}

flex-start means start both from the top

38
Q

Hence the following code:

.product-price {
display: flex;
}

There are 2 elements in the container. You want:
To put one element to the left and 1 to the right
Align them vertically (same horizontal center line)
Have a margin of 20px at the bottom.

A

.product-price {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

39
Q

Hence the following:

.product-colors {
display: flex;
}

.color {
background-color: #000;
height: 22px;
width: 22px;
margin-right: 10px;
}

The product colors is the container and the color is the child element. How can this be written better with respect to margins

A

.product-colors {
display: flex;
gap: 10px;
}

.color {
background-color: #000;
height: 22px;
width: 22px;
}

40
Q

Hence the following code:

.container {
/* background-color: red; */
display: flex;
}

.product-img {
}

.product-info {
margin-top: 20px;
}

.product-details {
margin-top: 20px;
}

How to make sure the product info and product details element are the same width?

Between the 3 child element there must be a gap of 40 px

A

.container {
/* background-color: red; */
display: flex;
gap: 40px;
}

.product-img {
}

.product-info {
flex: 1;
margin-top: 20px;
}

.product-details {
flex: 1;
margin-top: 20px;
}

41
Q

How to easily inspect the flexbox

A

Inspect in the console and then hit the flex button(s) in the html: It will show you a nice looking overlay of the gaps

42
Q

Name the basic grid terminology within css grid? (9)

A

Grid container + Grid items,
Grid row + Grid columns
Grid lines
Grid cell + Gutters (gaps)
Column axis, Row axis,

43
Q

How to you start when applying CSS grid?

A

set container to:
display: grid

44
Q

Difference between Grid cell and grid item?

A

Grid cells are always created but not always filled

45
Q

CSS Grid:
What is the relation between grid lines vs. columns and rows

A

When there’s 3 columns and 2 rows, the grid lines will be 4 (vertical) vs 3 (horizontal)

46
Q

CSS Grid:
How to establish the grid and column tracks?

A

grid-template-columns:
grid-template-rows:

47
Q

CSS grid: How to fill unused space when establishing column/row tracks?

A

fr

48
Q

CSS grid: How to create empty space between tracks?

A

row-gap:
column gap:

or when applying both:
gap:

49
Q

CSS grid:
How to align items horizontally inside rows?

A

justify-items: stretch, start, center, end

50
Q

CSS grid:
How to align items vertically inside rows?

A

align-items: stretch, start, center, end

51
Q

CSS grid:
How to align horizontally entire grid inside grid container (Only applies if container is larger than the grid)

A

justify-content: start. center, end

52
Q

CSS grid:
How to align vertically entire grid inside grid container (Only applies if container is larger than the grid)

A

align-content: start, center, end

53
Q

CSS grid:
How to span a grid item over multiple cells, based on line numbers? (2 ways)

A

grid-column: 1 / 4
or:
grid-column: 1 / span 3
(same result)

And for rows:
grid-row

54
Q

CSS grid:
How to overwrite justify/align-items for single items?

A

justify-self: stretch, start, center, end

align-self: stretch, start, center, end

55
Q

CSS grid:
How to set up 2 columns with a width of 250px and 150px?

A

grid-template-columns: 250px 150px;

56
Q

Flexbox: Define which is the main axis?

A

flex-direction: row, row-reverse, column, column-reverse

57
Q

Flexbox:
Allow items to wrap into a new line if they are too large

A

flex-wrap: nowrap, wrap, wrap-reverse

nowrap will let the content break out of the container
wrap will divide over new line

58
Q

Flexbox:
In case of multiple lines (flex-wrap: wrap), how to align the content?

A

align-content: stretch, flex-start, flex-end, center, space-between, space-around

(In that case you are aligning the whole grid to the grid container the same way as in CSS grid since you have multiple lines.)

59
Q

Flex items:
How to allow for growth, shrink, define item’s width (instead of width property) and how to write all of it shorthand

A

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto

60
Q

Flexbox: How to control order of items?

A

order: 0
-1 makes item first
1 makes item last

61
Q

CSS Grid:
How to define a gap for the column or row only?

A

column-gap: 30px
row-gap: 60px

62
Q

CSS Grid:
How to make sure that the first column is 2 times as wide as the other 3

A

grid-template-columns: 2fr 1fr 1fr 1fr;

63
Q

CSS Grid:
What happens here?

grid-template-columns: 2fr 1fr 1fr auto;

A

Will only apply the space necessary for that column

64
Q

CSS Grid:
How to repeat for example 1fr over multiple columns?

A

grid-template-columns: repeat(4, 1fr)

65
Q

CSS Grid:
What happens here in case of three rows?

grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr;

A

The third row will take up only the space that it needs to.

1st and 2nd row: Explicit (because it has been defined)

3rd row: Implicit (because it was automatically defined)

66
Q

CSS Grid:
What will happen with respect to height?

grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr auto;
height: 500px;
row-gap: 40px;

A

The container height will be 500px.
The second row will be take only the space it needs because is it set to auto.
The gap between the rows will be 40px.
Then the first row will take up the remaining space

67
Q

CSS Grid:
How can you propery see the grid overview in the viewport

A

Hit the grid button in the Elements console viewer

68
Q

CSS Grid:
How to place an element from 2 to 3rd col. grid line and from the 1 til 2nd row grid line

A

grid-column: 2 / 3
grid-row: 1 / 2

69
Q

CSS Grid:
How to span more than 1 column?

A

grid-column: 1 / 3
OR:
grid-column: 1 / span 3;

70
Q

CSS Grid:
Let say you want to place an element from column line 2 until the end. What would you write

A

grid-column: 2 / -1
The left grid line nrs are inverted compared to the right grid line nrs.

71
Q

CSS Grid:
How to center all elements within the container

A

justify-content: center;
align-content: center;

72
Q

CSS Grid:
How differ between align items inside cells and align elements inside grid?

A

Align inside cells:
justify-items
align-items

Align entire grid inside grid container:
justify-content
align-content

73
Q

How is the syntax different between flexbox and css grid regaring aligning and justifying items/content?

A

flex-start, center, flex-end
vs.
start, center, end

74
Q

CSS Grid:
How to apply aligning to individual items?

A

align-self: end;
justify-self: end;

75
Q

CSS Grid:
What is the equivalent of using marging in CSS grid?

A

column-gap;
row-gap;

76
Q

Stretch the main header from the beginning til the end:

.main-header{

}

A

.main-header{
grid-column: 1 / -1;
}

77
Q

What will block elements do normally in grid cell?

A

Occupy 100% of the height and width of the cell

HTML/CSS (12 decks)

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