Chapter 5

Question 1

What is the box model?

Answer 1

It uses the CSS properties margin, border, and padding to arrange content on the page.

Question 2

What is the differences between margins and border?

Answer 2

Margins = transparent, meaning we cannot add color or style to the margin property.

We can add color and style to the border.

Question 3

What is the flexible box layout?

Answer 3

It is new in CSS3

Creates flexible elements in order to accommodate different screen sizes and display devices.

Uses parent-child concept.

Question 4

What is the first step in creating a flexible layout?

Answer 4

1. Create a flexible parent element.

2. All the child elements contained inside the parent element are flexible by default.

Question 5

What is the display property value to flex?

Answer 5

display:flex;

Question 6

What is the term for child elements inside a parent flex element?

Answer 6

Child flex items

Question 7

What does the flex properties tell the browser?

Answer 7

The flex-grow, flex-shrink, and flex-basis properties tell the browser or user agent how elements should react when the display or screen size changes.

Question 8

What is flex-grow?

Answer 8

The flex-grow property specifies how much the element will grow relative to the other flex items within the parent flex container. The amount of actual growth is determined by the available space in the parent element. Negative numbers cannot be used as a flex-grow value. The default flex-grow value is one, meaning each flex item is the same size.

If the value is set to zero = it will not grow.

Question 9

What is flex-shrink?

Answer 9

The flex-shrink property specifies how much the element will shrink relative to the other flex items within the parent flex container. The default flex-shrink value is one.

If the value is set to zero= it will not shrink.

Question 10

What is flex-basis?

Answer 10

The flex-basis property, the third value provided to the flex property, sets the initial width of the element before the other elements are distributed. If the flex-basis value is not set, it defaults to 0.

Question 11

What is a flex-direction?

Answer 11

The flex-direction property is a parent flex box property that is used to change how the flex box container will display child items

Question 12

What is flex-wrap:wrap used for?

Answer 12

Allows the contents to be displayed vertically whn the screen gets smalller.

Question 13

Whats another way of writing:

#container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
}

Answer 13

container {

display:flex;
flex-flow: row wrap;
}

Question 14

What is a grid layout model?

Answer 14

It is still under development

Only IE 10 browser supports it and no other browsers.

W3C considers it as “Working draft”

Question 15

Grid items?
Grid tracks?
Grid cell?
Grid lines?

Answer 15

Child elements are called grid items

grid tracks are the rows and columns in the grid.

grid lines are the horizontal and vertical lines between the

grid cell is the space used for the layout of the element like cells in an Excel spreadsheet.columns and rows,

Question 16

What is included in the total width?

Answer 16

Total width = width + padding right + padding left + border right + border left + margin right + margin left

Question 17

What is included in the total height?

Answer 17

Total height = height + pad top + pad bottom + border top + border bottom + margin top + margin bottom

Question 18

How does the css look like in the flexParent and flexChild?

Answer 18

#flexParent {
display:flex;
}
. flexChild {
flex: 0 1 200px;
background: red;
margin: 2px; }