HTML Tables and Layout Using Flexbox and Grid

What model includes margin, border, padding, and content?

• CSS Box model

• CSS3 Flexbox Box model

• CSS3 Grid Layout model

• CSS Grid Template Layout Module

The CSS display: flex sets the flexbox as _____element.

• an invisible element

• an inline element

• a block-level

• a null element

You have a flexbox container with items set in a row. You want the items to be displayed in the opposite order in which they appear currently. Which code do you use?

• flex-direction: column-reverse

• flex-direction: row-reverse

• flex-direction: row-order-reverse

• flex-direction: reverse

Which of these properties can control the size of flex items?

• flex-wrap

• flex-item-align

• flex-pack

• flex

Which of the following are flex-direction property values? (Choose all that apply.)

• auto

• row-reverse

• column

• start

You want items to be able to overflow a flexbox. What code do you use?

• flex-wrap: nowrap

• flex-wrap: overflow

• flex-wrap: none

• flex-wrap: wrap

Which model defines structures similar to tables using 2 dimensions?

• CSS Box model

• CSS3 Flexbox Box model

• CSS3 Grid Layout model

• CSS float

You are creating a grid layout. What does 1fr mean in the following code?

grid-template-columns: 150px 150px 1fr 1fr;

• The first two columns will be two fraction units of the stated width.

• The third and fourth columns is 1 fraction unit of the remaining space in the grid.

• The second column will be double the stated width.

• The second column will be half of the remaining space in the grid.

How many columns and rows are defined in the following code?

section {

display: grid;

grid-template-columns: 100px 1fr 1fr 250px;

grid-rows: 50px 1fr 1fr ;

}

section header {

grid-column: 1 / 4;

grid-row: 1;

}

section nav {

grid-column: 1;

grid-row: 2 / 3;

}

section article {

grid-column: 2;

grid-row: 2;

}

section aside {

grid-column: 3;

grid-row: 2;

}

section footer {

grid-column: 1 / 4;

grid-row: 3;

}

• 1 rows and 2 columns

• 2 rows and 3 columns

• 3 rows and 2 columns

• 3 rows and 4 columns

What property is used to take elements out of the normal document flow?

• grid

• sticky

• position

• flex