wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

CSS Flexbox

Total questions: 10

Worksheet time: 7mins

Name
Class
Date
1.

What css rule creates a flexbox container?

a)

flex: box

b)

display: flexbox

c)

flex: container

d)

display: flex

2.

What are the two options for flex-direction?

a)

row

b)

vertical

c)

column

d)

horizontal

3.

Which css value forces flex items onto a new line once the width of the container has been filled?

a)

newline

b)

wrap

c)

continue

d)

float

4.

Which flexbox properties aligns items on the same axis as the flex-direction?

a)

justify-content

b)

align-items

c)

align-content

d)

justify-items

5.

Which property will align a flexbox item differently from all others within the same flexbox container?

a)

self-align

b)

override-align

c)

align-self

d)

justify-self

6.

Which can make flex items evenly distributed in a flex container with a horizontal flow of flex items?

* No extra space before the first item and after the last one

a)

justify-content: center

b)

justify-content: space-around

c)

justify-content: space-between

d)

justify-content: stretch

7.

The css property "order" for flex items allows you to

a)

specify in what direction the flex items appear

b)

specify in what order the flex items appear

c)

specify at what time flex items appear

d)

none of the above

8.

The width of #child-1 is ​ ​ (a)   and of #child-2 is ​ (b)  

Choose from the below words
180px
220px
100px
200px
160px
240px
9.

In this flexbox, the flex-direction is:

(a)  

10.

In this flexbox, the flex-wrap is

(a)