CSS - Layouts

Question 1

Never use ______ for layouts.

Answer 1

Never use tables for layouts.

Question 2

An element with a float value of _____ or _____ is taken out of the normal flow of a document and shifted to one side of the containing box. The content that follows it in the document wraps around the floated element’s new position.

Answer 2

An element with a float value of left or right is taken out of the normal flow of a document and shifted to one side of the containing box. The content that follows it in the document wraps around the floated element’s new position.

Question 3

_____: An element is not floated and behaves as normal.

Answer 3

none: An element is not floated and behaves as normal.

Question 4

______: An element is taken out of the normal flow and is shifted to the left of where it was to otherwise appear, with content flowing around it on the right side of the element.

Answer 4

left: An element is taken out of the normal flow and is shifted to the left of where it was to otherwise appear, with content flowing around it on the right side of the element.

Question 5

______: An element is taken out of the normal flow and is shifted to the left of where it was to otherwise appear, with content flowing around it on the right side of the element. Think of a small photo that is moved to the right and has text flowing around it;

Answer 5

right: An element is taken out of the normal flow and is shifted to the left of where it was to otherwise appear, with content flowing around it on the right side of the element. Think of a small photo that is moved to the right and has text flowing around it;

Question 6

You now have the basic idea of how an element behaves when floated.

Answer 6

You now have the basic idea of how an element behaves when floated.

Question 7

Using _____ for layout was a common web design layout technique. However, there are many things that designers need to understand about floats.

Answer 7

Using floats for layout was a common web design layout technique. However, there are many things that designers need to understand about floats.

Question 8

What method allows block elements to behave like inline elements (positioned next to each other) AND maintain its widths and heights?

Answer 8

.box {
display: inline-block;
}

Question 9

______ gives designers a higher level of layout control over multiple children within a parent.

Answer 9

Flexbox gives designers a higher level of layout control over multiple children within a parent.

Question 10

A flexbox implementation consists of a _____ container (flex container) and ______ elements (flex items).

Answer 10

A flexbox implementation consists of a parent container (flex container) and child elements (flex items).

Question 11

Flexbox defines how those _______ elements are laid out and how they fit the space available to them.

Answer 11

Flexbox defines how those child elements are laid out and how they fit the space available to them.

Question 12

What is the syntax for using flex?

Answer 12

.box {
display: flex;
}

<div class="box">
 <div>One</div>
 <div>Two</div> 
 <div>Three</div>
</div>

Question 13

Child elements may be assigned a ______ via the flex-direction property. This determines the “____ ____”. The other axis at 90 degrees to the main axis is called the “______-axis”.

Items may be arranged in a row (____ to _____ to _____) or a column (top to bottom/bottom to top).

Answer 13

Child elements may be assigned a direction via the flex-direction property. This determines the “main axis”. The other axis at 90 degrees to the main axis is called the “cross-axis”.

Items may be arranged in a row (left to right/right to left) or a column (top to bottom/bottom to top).

Question 14

Therefore, if the following CSS: flex-direction: row;

is applied to the flex-container, the main axis would be _____ and the cross axis would be _______.

Answer 14

Therefore, if the following CSS: flex-direction: row;

is applied to the flex-container, the main axis would be horizontal and the cross axis would be vertical.

Question 15

If additional layout control is needed, the “_______” property on individual flex-item elements can be used to specify the order of flex-items within the flex container.

Answer 15

If additional layout control is needed, the “order” property on individual flex-item elements can be used to specify the order of flex-items within the flex container.

Question 16

The justify-content property then defines how the browser distributes __________ and ________ content items.

Answer 16

The justify-content property then defines how the browser distributes space between and around content items.

Question 17

The align-self property defines how a single flex item is ______ on the _______ _______ .

Answer 17

The align-self property defines how a single flex item is aligned on the cross axis.

Question 18

______-______/_____-_____ specifies how the items grow/shrink relative to the rest of the _____-items. These properties can be set ________ of each other.

Answer 18

flex-grow/flex-shrink specifies how the items grow/shrink relative to the rest of the flex-items. These properties can be set independently of each other.

Question 19

Similar to flexbox, the CSS Grid system consists of a _____ and child ______. The difference is that the Grid manages _____ AND _______.

Answer 19

Similar to flexbox, the CSS Grid system consists of a parent and child elements. The difference is that the Grid manages rows AND columns.

Question 20

_____-______-______ define how the columns are sized.

Answer 20

grid-template-columns define how the columns are sized.

Question 21

_____-______-______ define how the rows are sized.

Answer 21

grid-template-rows define how the rows are sized.

Question 22

_____-______-______ specifies the named grid areas which must be set in the child element’s grid-area property. A dot signifies a blank grid area.

Answer 22

grid-template-areas specifies the named grid areas which must be set in the child element’s grid-area property. A dot signifies a blank grid area.

Question 23

The new fr unit represents a fraction of the available space in the grid container.

Answer 23

The new fr unit represents a fraction of the available space in the grid container.

Question 24

Therefore, grid-template-columns: 1fr 1fr 1fr 1fr would create _______ columns whereas grid-template-columns: 1fr 1fr 1fr 100px would create ______ columns out of the remaining available space (total space - 100px)

Answer 24

Therefore, grid-template-columns: 1fr 1fr 1fr 1fr would create 4 equal columns whereas grid-template-columns: 1fr 1fr 1fr 100px would create 3 equal columns out of the remaining available space (total space - 100px)

Question 25

.container {
	display: grid;
	\_\_\_\_\_\_\_\_\_: 1fr 1fr 1fr 1fr; 
	\_\_\_\_\_\_\_\_\_\_: 100px 200px 100px; 
	\_\_\_\_\_\_\_\_\_\_: "head head2 .side" 
		"main main2 . side" 
		"footer footer footer footer";

Answer 25

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 200px 100px;
grid-template-areas: “head head2 .side”
“main main2 . side”
“footer footer footer footer”;

.one{
grid-area: head;
}

Question 26

grid-_____ and grid-r____ may be used to specify an item’s start ____ and _____ in the grid system.

Answer 26

grid-column and grid-row may be used to specify an item’s start position and span in the grid system.

Question 27

Horizontal and vertical gutters can be set using the column-_____ and row-_____ properties.

Answer 27

Horizontal and vertical gutters can be set using the column-gap and row-gap properties.