CSS Layouts Flexbox

Which three values do the justify-content and align-items properties share?

• flex-start, flex-end, flex-center

• flex-start, baseline, stretch

• flex-start, flex-end, center

• flex-start, baseline, flex-center

Which property does not use the main axis to position the flex items?

• flex-wrap

• align-content

• justify-content

• flex-grow

Which of the following justify-content values positions all flex items in order with no additional spacing at the end of the row?

• space-between

• flex-start

• flex-end

• center

Which of the following shorthand syntaxes would achieve the same styling on the item class?

• flex: 2 1 120px;

• flex-flow: 2 1 120px;

• flex: 1 2 120px;

• flex: 120px 1 2;

Based on the code below where #container is a flex container and .box are its flex items, what can we assume about the width of the .box elements?

• The width of the .box elements will always be 300 pixels

• The width of the .box elements are invalid because the width of flex items must be declared using the flex-basis property.

• The width of the .box elements will be at least 300 pixels but will grow id the screen size is big enough.

• The width of the .box elements will depend on the size of the screen.

What is the align-items property used for?

• To align flex items on the main axis.

• To align flex items on the cross axis.

• To align flex items on both the main and cross axes.

• To align flex containers on the cross axis.

Which of the following display values will allow multiple flex containers to appear inline with each other?

• flex

• inline-flex

• inline-block-flex

• block-flex

What is the difference between the align-content property and the align-items property?

• The align-items property is used to align items vertically, whereas the align-content property is used to align items horizontally.

• The align-items property is declared on flex containers, whereas the align-content property is declared on flex items.

• The align-items property is used to align items within a signle row, whereas the align-content property is used to align multiple rows.

• The align-items property is used to align mutliple rows, whereas the align-content property is used for items within a signle row.

Imagine there are 60 extra pixels along the main axis and elements #alpha, #beta, and #gamma have the following flex-grow values. How many extra pixels will element #alpha have?

• 20 pixels

• 10 pixels

• 40 pixels

• 30 pixels

Which of the following choices will set a flex container’s flex-direction property to column and its flex-wrap property to wrap?

• flex: column wrap;

• flex: wrap column;

• flex-flow: wrap;

• flex-flow: column wrap;